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

【问题标题】：ngFor: different color for odd/even rows when loop is in ng-containerngFor：循环在 ng-container 中时奇/偶行的不同颜色
【发布时间】：2018-07-04 12:22:55
【问题描述】：

我有一个表格，我想为奇数行和偶数行赋予不同的背景颜色。通常，您可以为此使用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-container 元素中的 *ngFor 中声明的。

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

【问题讨论】：

你要求每一行有不同的颜色？
是的，某种颜色的所有奇数行，另一种某种颜色的所有偶数行。
请根据您的要求附上不同颜色的图片，以便我们有更好的主意
相当于这个：i.stack.imgur.com/DfRhR.jpg
附上的图片是奇数，偶数的颜色，你已经完成了。

标签： angular ngfor

【解决方案1】：

更新（最新的 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

【讨论】：

【解决方案2】：

使用*ngFor 的“偶数” | “奇数”属性！

无需创建 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>

【讨论】：

【解决方案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 类，这意味着奇数变量为真。

【讨论】：

ngFor 的好答案，但使用 [ngClass]="{'odd': odd}"

【解决方案4】：

你可以使用索引属性：

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

ngForOF Official docs

【讨论】：

这对我有用，但值得注意的是，将[ngClass] 添加到<ng-container> 可能会带来(cannot read property 'remove' of undefined) 错误。
请试试下面这个链接，我认为这比除以 2 更好stackoverflow.com/questions/36375686/…

【解决方案5】：

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

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

【讨论】：