angular5 štýl farba pozadia na základe stavu - uhlový, bunka

Mám materiál matový stôl a bunka má podmienené. Čo je potrebné urobiť, je farba bunky, ak je podmienka splnená.

<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>

Potrebujem iba farbu N / A červenú, inak žiadnu farbu. Akákoľvek pomoc by bola ocenená. Pokúsil som sa bez úspechu obaliť väzbu väzobným stavom style.background-color = "" "" ".

odpovede:

Môžete skúsiť:

<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>

a

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
}

Môžete vytvoriť podmienený štýl pomocou [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>