角度に基づいたangle5スタイルの背景色 - 角度、セル

マテリアルマットテーブルがあり、セルに条件があります。条件が真の場合、セルに色を付ける必要があります。

<div>
<ng-container matColumnDef="Value">
<mat-header-cell *matHeaderCellDef mat-sort-header> Value </mat-header-cell>
<mat-cell *matCellDef="let record" style="text-align:center"> {{record.Value == -1 ?  "N/A" : record.Value }} </mat-cell>
</ng-container>
</div>

N / Aを赤に着色する必要があります。それ以外は色がありません。任意の助けをいただければ幸いです。バインディングをstyle.background-color = "" red ""バインディング条件でラップしようとして成功しませんでした。

回答：

試すことができます：

<div>
<ng-container matColumnDef="Value">
<mat-header-cell *matHeaderCellDef mat-sort-header> Value </mat-header-cell>
<mat-cell *matCellDef="let record" [class.red]="record.Value == -1" style="text-align:center"> {{record.Value == -1 ?  "N/A" : record.Value }} </mat-cell>
</ng-container>
</div>

そして

mat-cell.red {
background-color: red;
align-self: stretch; // so the cell take all the height
line-height: 48px; // for vertical align of content if you are with the default cell height
}

条件付きスタイルを作成するには [ngStyle]：

<div>
<ng-container matColumnDef="Value">
<mat-header-cell *matHeaderCellDef mat-sort-header> Value </mat-header-cell>
<mat-cell *matCellDef="let record" style="text-align:center" [ngStyle]="{"background-color":record.Value == -1 ? "red" : "transparent" }"> {{record.Value == -1 ?  "N/A" : record.Value }} </mat-cell>
</ng-container>
</div>