Angular Mat-table如何根据变量值动态设置单元格背景色

1. 先定义样式类 #

在组件的样式文件（.component.css/.component.scss）里添加两个背景色类：

.yellow-bg {
  background-color: yellow;
}

.green-bg {
  background-color: green;
  color: white; /* 可选：让文字更易读 */
}

2. 修改表格模板代码 #

针对第二列（假设你的第二列matColumnDef是status，如果不是请对应调整），直接在mat-cell上绑定动态类，根据元素数值判断样式：

<ng-container matColumnDef="status">
  <mat-header-cell *matHeaderCellDef>状态</mat-header-cell>
  <mat-cell
    *matCellDef="let element; let i = index"
    [formGroupName]="i"
    [ngClass]="{ 
      'yellow-bg': element.status > 50, 
      'green-bg': element.status <= 50 
    }"
  >
    <mat-form-field>
      <input
        matInput
        type="number"
        placeholder="0"
        formControlName="status" <!-- 需匹配你的表单组内控件名 -->
      />
    </mat-form-field>
  </mat-cell>
</ng-container>

关键注意点 #

• 直接给mat-cell加样式类，能让整个单元格都应用背景色，而非仅输入框容器
• 把element.status替换成你实际存储数值的属性名（比如element.value）
• 输入框改成type="number"更适配数值输入场景
• 如果要严格按列索引（第二列）判断，把条件改成i === 1 && element.对应属性 > 50（Angular索引从0开始）

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