在Angular2中如何将类添加到第一行

Question

我想根据某些条件添加一个css类。

在下面的代码中，我想将RowHeaderCSS类添加到表的第一行，但它确实有效。谁可以帮我这个事？

<tr *ngFor="let dataObject of dataCollection;let isFirstRow=(index==1?true:false)" [ngClass]="{'RowHeaderCSS':isFirstRow)}">
        <td scope="row">{{dataObject.SNO}}</td>
        <td Overdue-Bucket-Template>{{dataObject.MONTH01}}</td>
        <td Overdue-Bucket-Template>{{dataObject.MONTH02}}</td>
</tr>

Answer 1

Angular有所有first循环的局部变量ngFor，它可以做你想要的

<tr *ngFor="let dataObject of dataCollection; let isFirstRow=first" [ngClass]="{'RowHeaderCSS' : isFirstRow}">
    <td scope="row">{{dataObject.SNO}}</td>
    <td Overdue-Bucket-Template>{{dataObject.MONTH01}}</td>
    <td Overdue-Bucket-Template>{{dataObject.MONTH02}}</td>
</tr>

https://angular.io/api/common/NgForOf

局部变量

NgFor提供了几个可以别名为局部变量的导出值：

1. index可迭代中当前项的索引。
2. first当项目是iterable中的第一个项目时为True。
3. last当项目是可迭代中的最后一项时为真。
4. even当项目在iterable中具有偶数索引时为True。
5. odd当项目在可迭代中具有奇数索引时为真。

Answer 2

<tr *ngFor="let dataObject of dataCollection;let [ngClass]="{'RowHeaderCSS':isFirstRow(index))}">
        <td scope="row">{{dataObject.SNO}}</td>
        <td Overdue-Bucket-Template>{{dataObject.MONTH01}}</td>
        <td Overdue-Bucket-Template>{{dataObject.MONTH02}}</td>
</tr>

isFirstRow(index: number) : boolean{
  return index === 1;
}

Answer 3

只是略有不同的语法：

<tr *ngFor="let dataObject of dataCollection; let i=index" [class.RowHeaderCSS]="i==0">
    <td scope="row">{{dataObject.SNO}}</td>
    <td Overdue-Bucket-Template>{{dataObject.MONTH01}}</td>
    <td Overdue-Bucket-Template>{{dataObject.MONTH02}}</td>
</tr>

Answer 4

<tr *ngFor="let dataObject of dataCollection; let i = index" [ngClass]="{ i == 0 ? 'RowHeaderCSS' : ''}">
    <td scope="row">{{dataObject.SNO}}</td>
    <td Overdue-Bucket-Template>{{dataObject.MONTH01}}</td>
    <td Overdue-Bucket-Template>{{dataObject.MONTH02}}</td>
</tr>