角度：用ngIf纠正行的交替着色

Question

我正在用Angular显示一张桌子。该数据在列表中。

我的桌子应该有不同的颜色。我为此使用CSS nth-child。

tr:nth-child(even)
{
  background: white;
}

tr:nth-child(odd)
{
  background: lightgreen;
}

现在，我为表格添加了一个过滤器。仅显示符合特殊条件的行。

<tr *ngFor="let d of data">
   <ng-container *ngIf="filtermatch (d)">
     <td>{{ d.text }}</td>
   </ng-container>
</tr>

但是现在，只有在没有滤镜的情况下，才会发生正确的交替着色。如果使用过滤器，我认为着色是由完整数据组成的，而不是由过滤后的数据组成。

在旁边

通过计数行来

• 手动上色

• 先过滤并使用表中的过滤数据

另一种对我有用的方法？

我想用ngIf过滤并使用CSS-nth-child。

Answer 1

您可以这样使用

组件：

color = 0;

模板：

<tr *ngFor="let d of data; let i=index;">
   <ng-container *ngIf="filtermatch(d)">
     <td [ngClass]="color=!color ? 'even' : 'odd'">{{ d.text }}</td>
   </ng-container>
</tr>