ngFor：当循环在 ng-container 中时 odd/even 行的不同颜色

Question

我有一个 table，我想在其中为奇数行和偶数行提供不同的背景颜色。通常，您可以为此使用 odd 和 even 变量。但是，我现在正在 ng-container 中构建我的 table 行，因此我可以有条件地在每次迭代中创建一个或多个行。在这种情况下，每次迭代都会创建 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-container 元素的 *ngFor 中声明了奇数变量。

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

Answer 1

为什么不为此使用 CSS？例如，为所有行和 CSS:

设置 k-alt class

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

Answer 2

您可以使用索引属性:

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

ngForOF Official docs

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 class，这意味着奇数变量为真。

Answer 4

更新（最新 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 Documentation，它也支持例如 first, last, and count

Answer 5

使用 *ngFor 的 "even" | "odd" 个属性！

无需创建 css 类。您只需要 html 和 Angular!

    <tr
      *ngFor="let row of data; even as isEven"
      [ngStyle]="{ background: isEven ? 'lightblue' : 'white' }"
    >
      // ...
    
    </tr>

使用这种方法以精简和声明的方式为您的行着色

这是一个完整的例子：

<table>
  <thead>
    <th *ngFor="let headerItem of ['description', 'value', 'year']">
      {{ headerItem }}
    </th>
  </thead>
  <tbody>
    <tr
      *ngFor="let row of data; even as isEven"
      [ngStyle]="{ background: isEven ? 'lightblue' : 'white' }"
    >
      <td>{{ row.description }}</td>
      <td>{{ row.value | currency }}</td>
      <td>{{ row.year }}</td>
    </tr>
  </tbody>
</table>

ngFor：当循环在 ng-container 中时 odd/even 行的不同颜色

ngFor: different color for odd/even rows when loop is in ng-container

ngfor

angular

使用 *ngFor 的 "even" | "odd" 个属性！