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

Posted 2023-02-22

【中文标题】ngFor：循环在 ng-container 中时奇/偶行的不同颜色

【英文标题】：ngFor: different color for odd/even rows when loop is in 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

附上的图片是奇数，偶数的颜色，你已经完成了。

【参考方案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 更好***.com/questions/36375686/…

【参考方案5】：

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

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