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

正如您所看到的，每次迭代都会导致行被标记为不同的背景，而不是每行本身，因为奇数变量是在 ng- 的 *ngFor 中声明的。容器 元素。

在将 ng-container 与条件行一起使用时，是否有办法为每行提供不同的背景颜色？

Answer 1

为什么不使用 CSS 呢？例如，在 CSS 中为所有行设置 k-alt 类:

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