angular - 如何有条件地设置 Material 表单元格的背景颜色

Question

在给出的示例 Material 表中 here,如果我想更改包含值 > 10 的所有单元格的背景颜色，我会将代码放在哪里？

Answer 1

有很多方法可以做到。
这是一种方法，就像 重量 单元格如果值大于 10，则背景为黄色。

<ng-container matColumnDef="weight">
    <mat-header-cell *matHeaderCellDef> Weight </mat-header-cell>
    <mat-cell [ngClass]="{clsWeight: element.weight > 10}" *matCellDef="let element"> {{element.weight}} </mat-cell>
  </ng-container>

这是工作 demo
如果您不想使用 ngClass 那么你可以直接使用 款式像这样

<ng-container matColumnDef="weight">
    <mat-header-cell *matHeaderCellDef> Weight </mat-header-cell>
    <mat-cell [style.background-color]="element.weight > 10 ? 'yellow' : ''" *matCellDef="let element"> {{element.weight}} </mat-cell>
  </ng-container>

工作 Demo