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

【问题标题】：How to conditionally change background color of a mat cell in Angular?如何有条件地更改Angular中mat单元格的背景颜色？
【发布时间】：2021-06-17 16:28:13
【问题描述】：

我有一个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>

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

【问题讨论】：

This post 会帮助你。

标签： angular angular-material

【解决方案1】：

你可以使用 ngStyle 或 style

将此属性应用于 mat-cell

ng样式

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

[style.backgroundColor]="row.statusBgColor"

【讨论】：

【解决方案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>

【讨论】：