Css 角度：使用ngIf对行进行正确的交替着色

我正在展示一张有棱角的桌子。其数据在列表中

我的桌子应该有交替的颜色。我用CSS第n个孩子来做这个

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>

{{d.text}}

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

旁边有吗

• 通过计算行数手动着色

• 在此之前筛选并使用表中的filterd数据

另一种对我有用的方法

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

您可以这样使用

组成部分：

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>

{{d.text}}