为什么不在html标签中添加ngClass的class参数，而在Angular模板中条件为真？

Question

我的 Angular 模板中有这段代码：

<div *ngFor="let name of product.names; let index of index" [ngClass]="{'text-muted': index === 0}">
  {{ name.value }}
</div>

然后它在浏览器中为 names 数组的第一个元素生成这个 HTML 代码：

<div _ngcontent-drs-c6="" ng-reflect-ng-class="[object Object]"> Test </div>

如果条件为真，为什么不将 class 参数添加到 div 中？这段代码哪里错了？

Answer 1

试试这个：

[class.text-muted]="index === 0"

Answer 2

它的发生是因为 let index of index。这是不正确的。正确的语法是 let i = index。所以尝试这样重写：

<div *ngFor = "let name of product.names; let i = index" [attr.data-index]="i"
    [ngClass]="{'text-muted': i === 0}"> 
</div>

Answer 3

试试 let i = index"

<div *ngFor="let name of product.names; let i = index" [ngClass]="{'text-muted':  i === 0}">
    {{ name.value }}
</div>

Answer 4

就这样试试

<div *ngFor="let name of product.names; let i = index" [ngClass]="{'text-muted': i === 0}">
  {{ name.value }}
</div>

Why don't add the ngClass the class parameter to the html tag, but the condition is true in Angular template?