如何有条件地更改 Angular 中 mat 单元格的背景颜色？

Question

我有一个

mat

表，我想在其中有条件地更改特定单元格的

Background color

。

我的 HTML：

   <ng-container matColumnDef="Status">
        <mat-header-cell *matHeaderCellDef mat-sort-header>
            Status
        </mat-header-cell>
        <mat-cell *matCellDef="let row"> {{row.Status}} </mat-cell>
    </ng-container>

我在“行”变量中使用

row.statusBgColor

获取颜色值。

我尝试过：

<ng-container matColumnDef="Status">
  <mat-header-cell *matHeaderCellDef mat-sort-header>
     Status
  </mat-header-cell>
  <mat-cell style="background-color: {{row.statusBgColor}}" *matCellDef="let row"> {{row.Status}}
  </mat-cell>
</ng-container>

但这没有用。谁能帮我解决这个问题吗？

Answer 1

你可以使用ngStyle或style

将此属性应用于 mat-cell

1. ng风格

   [ngStyle]="{'background-color':row.statusBgColor}"

2. 风格

   [style.backgroundColor]="row.statusBgColor"

Answer 2

明白了。

                    <ng-container matColumnDef="Status">
                        <mat-header-cell *matHeaderCellDef mat-sort-header>
                           Status
                        </mat-header-cell>
                        <mat-cell [style.background-color]="row.statusBgColor" *matCellDef="let row"> {{row.Status}} </mat-cell>
                    </ng-container>

Answer 3

您仍然无法设置“颜色”等属性