使用可扩展行向 Angular Material Table 添加交替行颜色答案

【问题标题】：Add alternating rowcolor to Angular Material Table with expandable rows使用可扩展行向 Angular Material Table 添加交替行颜色
【发布时间】：2021-08-27 09:04:13
【问题描述】：

从具有可扩展行 (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;
}

【问题讨论】：

标签： angular angular-material

【解决方案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;
}

Sample Solution on StackBlitz

【讨论】：

完美运行，谢谢！

【解决方案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>

【讨论】：

【解决方案3】：

您可以使用nth-child 和公式为相关行着色：

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

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

到下一个相关行有4个循环，你在+之后指定起始偏移量。

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

【讨论】：