Angular 2、在ngFor中使用带条件的ngClass

Question

我有显示数据的 ngFor 循环，根据该循环中的真假，我该如何更改 css？我试过的方法对我不起作用。

HTML

<div class="class" *ngFor="let something of something" [ngClass]="{'classno2': sent}">
    <div> {{something.name}}
    </div>
</div>

打字稿

something;

this.something = [
    {name: "NAMEE", sent: false},
    {name: "NAMEE2", sent: true},
]

CSS

.class {
    color: red;
}
.classno2 {
    color: blue;
}

我没有收到任何错误，但没有任何变化。

Answer 1

正确的语法：

<div class="class" *ngFor="let smth of something" [class.classno2]="smth.sent">
    <div> {{something.name}} </div>
</div>

Answer 2

您可以像这样使用 [ngClass]：

<div *ngFor="let some of something" [ngClass]="{'classno2': some.sent, 'class': !some.sent}">
    <div> {{some.name}}
    </div>
</div>

以上将根据 sent 是否为 true/false 来处理样式。

Angular 2, using ngClass with conditionals in ngFor