Цвет фона стиля angular5 в зависимости от условия

Question

У меня есть таблица матов материала, а в ячейке есть условие. Что мне нужно сделать, так это покрасить ячейку, если условие верно.

<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'" без успеха.

Answer 1

Ты можешь попробовать:

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

Answer 2

Вы можете создать условный стиль с [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>