Angular 模板应用 class 使用迭代器和 *ngFor

Question

我有这个代码：

<thead>
  <th class="dude" *ngFor="let tp of column_names;let i=index">{{tp}}</th>
</thead>

如何根据索引应用 class？例如。第一个索引得到 class dude_0 当其余的得到 dude_1?

例如

 <thead>
     if i==0
          <th class="dude_0" *ngFor="let tp of column_names;let i==index"{{tp}}</th>
     if i>0
         <th class="dude_1" *ngFor="let tp of column_names;let i=index"{{tp}}</th>


</thead>

Answer 1

使用[ngClass]

<thead>
  <th [ngClass]="{'dude_0': i==0, 'dude_1': i>0}" *ngFor="let tp of column_names;let i=index">{{tp}}</th>
</thead>

Answer 2

<th *ngFor="let tp of column_names; index as index" [class.dude_0]="index === 0" 
    [class.dude_1]="index > 0">{{tp}}</th>

或者更简单，首先：

<th *ngFor="let tp of column_names; first as first" [class.dude_0]="first" 
    [class.dude_1]="!first">{{tp}}</th>

Angular 模板应用 class 使用迭代器和 *ngFor

Angular template apply class using iters and *ngFor

angular-template

angular