如何为带可展开行的Angular Material Table添加隔行变色效果

原CSS方案失效的核心原因是：nth-child选择器会统计所有同级子元素，隐藏的展开行也属于.mat-row节点，会打乱奇偶计数逻辑。以下是两种可行的实现方案：

方案1：Angular模板绑定索引（兼容性最好，不受DOM结构影响） #

直接通过表格行的索引判断奇偶，绑定对应样式，完全不依赖DOM节点排布：

1. 修改模板中的行定义，给普通数据行绑定奇偶类，展开行不绑定：

<!-- 普通数据行 -->
<mat-row 
  *matRowDef="let row; let even = even; columns: displayedColumns;"
  [ngClass]="even ? 'row-even' : 'row-odd'"
></mat-row>
<!-- 展开详情行 -->
<mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></mat-row>

2. 对应CSS样式：

.row-odd {
  background-color: #fff;
}
.row-even {
  background-color: #eee;
}
/* 可选：展开详情行和所属主行保持同色 */
.example-detail-row {
  background-color: inherit;
}

方案2：纯CSS方案（无需修改模板，主流浏览器均支持） #

使用nth-child的筛选语法，只统计普通数据行再计数，自动排除展开行：

/* 排除展开行后统计奇偶 */
.mat-row:nth-child(even of :not(.example-detail-row)) {
  background-color: #eee;
}
.mat-row:nth-child(odd of :not(.example-detail-row)) {
  background-color: #fff;
}

注：如果你的展开行自定义类名不是example-detail-row，替换为你实际使用的类名即可。

内容的提问来源于stack exchange，提问作者Ben