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

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

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

Answer 2

更新（适用于最新的 Angular 版本）：

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

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

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

</ng-container>

随附Stackblitz Demo供您参考。

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

Answer 3

您可以使用索引属性：

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

ngForOF Official docs

Answer 4

您也可以这样使用：

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

使用偶数/奇数属性！

它们总是在 *ngFor 指令中可用，并且很容易与 [ngStyle] 语法结合使用。

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

    <tr
      *ngFor="let row of dataSource; 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 dataSource; 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中时，奇数/偶数行的颜色不同

5 个答案:

使用偶数/奇数属性！