angular5 style couleur de fond basé sur la condition

Question

J'ai un tableau de matelas de matériaux et la cellule a un conditionnel. Ce que je dois faire, c'est colorer la cellule si la condition est vraie.

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

J'ai seulement besoin d'avoir le N/A coloré en rouge, sinon pas de couleur. Toute aide serait appréciée. J'ai essayé d'envelopper la reliure avec la condition de reliure style.background-color="'red'" sans succès.

Answer 1

Vous pouvez créer un style conditionnel avec [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>

Answer 2

Pouvez-vous essayer :

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

et

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
}