Angular 5 Material数据表格如何为奇偶行添加样式类？

嘿，我来帮你搞定这个问题！给Angular Material的数据表格奇偶行加样式其实很简单，有两种常用的方法，看你需求选就行：

方法一：纯CSS选择器（最简单） #

Angular Material的表格行默认使用.mat-row类，直接用CSS的:nth-child伪类就能选中奇偶行，完全不需要修改模板代码。

在你的组件CSS文件（或者全局样式文件）里添加这段代码：

/* 奇数行样式 */
.mat-row:nth-child(odd) {
  background-color: #f8f9fa; /* 你可以换成自己想要的颜色或样式 */
}

/* 偶数行样式 */
.mat-row:nth-child(even) {
  background-color: #ffffff;
}

如果遇到样式不生效的情况，大概率是组件样式隔离的问题——你可以试试给选择器加个父元素限定（比如你的组件类名），或者把样式放到全局样式文件里（比如styles.css）。

方法二：用Angular的ngClass指令（适合动态场景） #

如果你需要更灵活的控制（比如结合数据状态调整样式），可以用ngClass绑定行索引来添加自定义类。

修改你的表格模板代码：

<tr mat-row 
    *matRowDef="let row; columns: displayedColumns; let index = index;"
    [ngClass]="{'custom-odd-row': index % 2 !== 0, 'custom-even-row': index % 2 === 0}">
</tr>

然后在CSS里定义这两个自定义类：

.custom-odd-row {
  background-color: #e9ecef;
}

.custom-even-row {
  background-color: #ffffff;
}

注意：如果用了分页或者虚拟滚动，这里的index是当前页/视口中的行索引，不是整个数据集的全局索引。如果需要全局索引，你得从数据源里直接获取对应的位置（比如在数据数组中提前添加id或globalIndex字段）。

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