在angular中为生成的表的前3行设置唯一的设计或颜色

Question

我有一个表格，非常类似于在material angular网站提供的一个例子。唯一的区别是我所创建的表是不断变化的，所以我不能使用这个方法:

[ngClass]="{'top-rank-color': row.id== '1'}"

是否有一种方法来颜色的前3行在桌子上，而不管它的内容?

这是我所指的表:https://stackblitz.com/angular/yjpllxbylapx?file=src%2Fapp%2Ftable-basic-example.ts

Answer 1

请在您的table-basic-example.css中尝试

.mat-row:nth-child(-n+3) {
background-color: rebeccapurple;
}

或

::ng-deep .mat-table tbody tr:nth-child(-n+3) {
background-color: rebeccapurple;
}

或

::ng-deep .mat-table tbody .mat-row:nth-child(-n+3) {
background-color: rebeccapurple;
}

Answer 2

在链接的stackblitz示例中，您可以打开table-basic-example.css并添加以下CSS规则来为前3行上色:

.mat-row:nth-child(1),
.mat-row:nth-child(2),
.mat-row:nth-child(3) {
background-color: blue;
}