如何为表组行交替应用颜色？

Question

我想将表格行显示为一组行的替代颜色。我在下面的代码中使用了替代颜色，但要求不同。如果有一组行是相同的颜色，则应使用其他颜色。我正在使用Angular 7，material Design 2平台。

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

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

预期的行为应如下图所示。

Answer 1

您可以通过Angular 7中的简单代码轻松获得此功能。 通过使用ngClass我们可以实现这一目标，即

[ngClass]="index == 0?'active':'dull-white'"

您可以在那里使用条件来实现自己的目标。 对您的查询发表评论。

Answer 2

您可以使用所需的逻辑为每个单元格着色：

[ngStyle]="{'background-color': condition1 != condition2 ? 'red' : 'white'  }"