Angular 4中如何修改指定mat-table列（Table C的Column3）的字体颜色？

别担心，新手刚接触Angular和mat-table遇到样式调整问题太正常了，我一步步给你讲清楚怎么操作，不管是通用的指定列改色，还是你这种多个表格里精准改某一个表格的某一列，都有简单的办法～

一、通用场景：修改任意mat-table指定列的字体颜色 #

这里有两种常用方法，你可以根据需求选择：

方法1：CSS类绑定（推荐，样式与逻辑分离） #

这种方法最适合固定颜色的场景，后期维护也方便：

• 第一步：在你的组件CSS文件里，定义一个专属的样式类：

/* 自定义列字体颜色类，颜色值可以换成你需要的，比如红色#ff0000、RGB(255,0,0)都可以 */
.column-custom-color {
  color: #ff4444;
}

• 第二步：在目标列的单元格定义里，添加这个类：

<!-- 假设你的Column3的列定义是这样的 -->
<ng-container matColumnDef="column3">
  <th mat-header-cell *matHeaderCellDef> Column3 </th>
  <!-- 给td标签加上我们定义的类 -->
  <td mat-cell *matCellDef="let element" class="column-custom-color"> {{element.column3}} </td>
</ng-container>

这样所有该列的单元格都会应用这个颜色样式。

方法2：ngStyle动态绑定（适合根据数据动态改色） #

如果你的颜色需要根据单元格内容变化（比如数值大于100变红，小于100变绿），可以用动态样式绑定：

<ng-container matColumnDef="column3">
  <th mat-header-cell *matHeaderCellDef> Column3 </th>
  <!-- 根据element.column3的值判断颜色 -->
  <td mat-cell *matCellDef="let element" [ngStyle]="{'color': element.column3 > 100 ? 'red' : '#33cc33'}">
    {{element.column3}}
  </td>
</ng-container>

二、针对你的具体需求（Angular 4，仅修改Table C的Column3） #

因为你有四个mat-table，要避免样式影响到其他表格，我们可以给Table C加一个专属标识，再精准定位样式：

1. 给Table C添加一个专属类名，比如table-c：

<!-- 给你的Table C加上class="table-c" -->
<mat-table [dataSource]="dataSourceC" class="table-c">
  <!-- 这里是Table C的所有列定义 -->
</mat-table>

2. 在组件CSS文件里，写精准的嵌套样式，只作用于Table C的Column3：
   有两种更精准的写法，选一种就行：

• 写法一：通过列的位置定位（如果Column3是Table C的第三列）

/* 只给table-c里的第三列单元格设置颜色 */
.table-c td.mat-cell:nth-child(3) {
  color: #9933ff;
}

• 写法二：通过列的matColumnDef属性定位（更稳妥，不管列位置怎么变都生效）

/* 只给table-c里mat-column为column3的单元格设置颜色 */
.table-c td.mat-cell[mat-column="column3"] {
  color: #9933ff;
}

小提示 #

Angular 4的mat-table指令和类名和后续版本基本一致，这些方法都能正常生效。如果是第一次写，记得检查列定义里的matColumnDef名称和数据绑定的element.column3是否对应，还有CSS文件有没有正确关联到组件（默认情况下，只要你在组件的@Component装饰器里指定了styleUrls，就没问题）。

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