Cách chuyển giá trị từ mã typecript sang css trong Angular 6

Question

Tôi biết tôi đã sử dụng ngClasshoặc ngStylenhưng tôi không thể tìm ra cách chuyển giá trị đó. Đây là mã của tôi.

dải.component.ts

import { ... } from '@angular/core';

@Component({
    selector: 'app-strip',
    templateUrl: './strip.component.html'
})
export class StripComponent implements OnInit {
    ...
    @Input() widthValue: any; // getting this from parent component

    staticKpi:{...}=[][]
}

strip.component.html

<ng-container>
    <div *ngFor="let row of staticKpi">
        <div class="rows" *ngFor="let item of row">
            <div class="col-12">
                <h2>{{widthValue}}</h2> <!-- this is printing correct value-->
                ...
            </div>
        </div>
    </div>
</ng-container>

Tôi phải quyết định chiều rộng của các lớp một cách động trong scss như sau:

dải.component.css

.rows {
    display: inline-block;
    width: calc(100%/widthValue); // <----- here
    text-align: left !important;
    background: red;
}

Tôi có thể đã sử dụng col-{{widthValue}}trong HTML nhưng không, tôi đã được thông báo rằng nó phải từ thuộc tính width từ css. Làm ơn giúp tôi. Tôi không chắc về cách sử dụng ngClass ở đây.

Answer 1

Sử dụng class

<div [class]="'col-'+ widthValue"></div>

HOẶC LÀ

Sử dụng style.width

<div [style.width]="(widthValue/12)*100 + '%'"></div>

BẢN GIỚI THIỆU