将交替行色添加到具有可展开行的角材质表中

Question

对于具有可扩展行(https://stackblitz.com/angular/ybxxqkoqknl?file=src%2Fapp%2Ftable-expandable-rows-example.css)的表的Angular Material示例，我想为该表添加交替的行色。但是，标准解决方案(如下所示)不起作用，因为表中存在扩展的行(高度= 0)。是否有任何替代的解决方案，使交替行色可能在这个表?

.mat-row:nth-child(even){
background-color: #eee;
}
.mat-row:nth-child(odd){
background-color: white;
} 

Answer 1

你可以试试这个CSS样式表。默认情况下，所有行(包括详细行)将是background-color: white。

每三个&第四行(与其详细行连为一行)，background-color: #eee.

.mat-row {
background-color: white;
}
.mat-row:nth-child(4n-1), .mat-row:nth-child(4n) {
background-color: #eee;
}

StackBlitz的样例解决方案

Answer 2

我在css文件中添加了2个新的类，看起来像这样:

.odd-row {
background-color: white;
}
.even-row {
background-color: #eee;
}

，在呈现行的模板中，我根据所呈现的数据项的索引添加了类:

<tr mat-row 
*matRowDef="let element; columns: columnsToDisplay; let i = dataIndex;"
class="example-element-row"
[class.odd-row]="i % 2"
[class.even-row]="!(i % 2)"
[class.example-expanded-row]="expandedElement === element"
(click)="expandedElement = expandedElement === element ? null : element">
</tr>

Answer 3

您可以使用nth-child和一个公式来为相关行上色:

.mat-row:nth-child(4n+1) {
background: red;
}
.mat-row:nth-child(4n+3) {
background: blue;
}

有一个周期4到下一个相关行，并且您在+之后指定开始偏移量。

更新stackblitz: https://stackblitz.com/edit/angular-lkhxmg?file=src%2Fapp%2Ftable-expandable-rows-example.css