ngFor：在ng-container中循环时，奇数/偶数行的颜色不同

Question

我有一张桌子，我想在其中为奇数行和偶数行提供不同的背景色。通常，您可以为此使用odd和even变量。但是，我现在在内建立表行，ng-container这样我可以有条件地在每次迭代中创建一个或多个行。在这种情况下，每次迭代都会根据变量创建1或2行。

<ng-container *ngFor="let detailof data.details; let odd = odd;">
    <tr [ngClass]="{ 'k-alt': odd}">
        <td>
            {{ detail.number1 }}
        </td>
        <td>
            {{ detail.number2 }}
        </td>
        <td>
            {{ detail.number3 }}
        </td>
    </tr>

    <tr *ngIf="detail.conditionalVariable" [ngClass]="{ 'k-alt': odd}">
        <td></td>
        <td>{{ detail.conditionalVariable }}</td>
        <td></td>

    </tr>
</ng-container>

如您所见，每次迭代都会使行被标记为不同的背景，而不是每行本身都被标记，因为*ngFor在ng-container元素中的声明了奇数变量。

ng-container与条件行一起使用时，是否可以为每一行赋予不同的背景色？

Answer 1

You can use the index property:

<ng-container *ngFor="let detailof data.details; let index = index" [ngClass]="{'myStyle': 0 === index % 2}">...</ng-container>

ngForOF Official docs

Answer 2

更新（最新的 Angular 版本）：

你可以这样实现： odd as isOdd; even as isEven;"

<ng-container *ngFor="let detail of data.details; odd as isOdd; even as isEven;">

   <tr [ngClass]="{ 'odd': isOdd, 'even': isEven }">   // Or 'k-alt': isOdd
     ...
   </tr>

</ng-container>

附上一个Stackblitz Demo供您参考。

您还可以访问NgForOf 文档，它还支持例如first, last, and count

Answer 3

你也可以这样使用：

<ng-container *ngFor="let detail of data.details; let odd = odd">
    <tr [class.oddBackground]=" odd ">
        <td>
            {{ detail.number1 }}
        </td>
        <td>
            {{ detail.number2 }}
        </td>
        <td>
            {{ detail.number3 }}
        </td>
    </tr>

    <tr *ngIf="detail.conditionalVariable" [ngClass]="{ 'k-alt': odd}">
        <td></td>
        <td>{{ detail.conditionalVariable }}</td>
        <td></td>

    </tr>
</ng-container>

仅当行为奇数时才会添加oddBackground 类，这意味着奇数变量为真。

Answer 4

您为什么不为此使用CSS？例如，k-alt为所有行和CSS 设置类：

tr.k-alt:nth-child(odd) {
    background: #CCC;
}