Angular 2，在 ngFor 中使用带有条件的 ngClass答案

【问题标题】：Angular 2, using ngClass with conditionals in ngForAngular 2，在 ngFor 中使用带有条件的 ngClass
【发布时间】：2017-06-30 07:41:28
【问题描述】：

我有显示数据的 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;
}

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

【问题讨论】：

【解决方案1】：

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

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

Above 将根据 sent 是否为真/假来处理样式。

【讨论】：

【解决方案2】：

正确的语法：

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

【讨论】：