将交替行颜色添加到 Angular Material Table 和可扩展行

Question

从 Angular Material 示例开始，table 具有可扩展行 (https://stackblitz.com/angular/ybxxqkoqknl?file=src%2Fapp%2Ftable-expandable-rows-example.css)，我想向 table 添加交替的行颜色。然而，标准解决方案（如下所示）不起作用，因为扩展行存在于 table（高度 = 0）中。在这个 table?

中，是否有任何替代解决方案可以使交替行颜色成为可能

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

Answer 1

我在 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 2

您可以试试这个 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

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

将交替行颜色添加到 Angular Material Table 和可扩展行

Add alternating rowcolor to Angular Material Table with expandable rows

angular-material

angular