javascript - 将两个表行交替在一起，然后是接下来的两个表行

Question

想法是我想要一个有 2 行的表，颜色为绿色，然后是 2 行，颜色为黄色，然后再次为绿色等。我尝试使用 :nth-child，但它并没有真正起作用。我使用 angular 6 作为自动表格，使用 angular material 6 进行造型。

这是我用来试验的stackblitz：https ://stackblitz.com/edit/angular-f6vmrt

根据要求：浏览器的屏幕截图；

如您所见，第一个 td 是蓝色，而第二个是默认颜色（白色）

Answer 1

使用时multiTemplateDataRows（如您的示例中所示），您可以使用该dataIndex属性使用 ngClass 应用类。例如（修改后的代码摘录）：

<tr mat-row *matRowDef="let element; let i = dataIndex; columns: columnsToDisplay"
    class="example-element-row" 
    [class.example-expanded-row]="expandedElement === element" 
    [ngClass]="i % 2 === 0 ? 'green' : 'yellow'"
    (click)="expandedElement = element">
</tr>
<tr mat-row *matRowDef="let row; let i = dataIndex; columns: ['expandedDetail']"
    class="example-detail-row" 
    [ngClass]="i % 2 === 0 ? 'green' : 'yellow'">
</tr>