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提供了几个可以导出的值   别名为局部变量：


index可迭代中当前项目的索引。

first当项目是可迭代中的第一项时为真。

last当项目是可迭代项中的最后一项时为真。

even当项目在iterable中具有偶数索引时为真。

odd当项目在iterable中有奇数索引时为真。

Answer 2

<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>

Answer 3

<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 4

语法略有不同：

<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>

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

4 个答案: