angle5 Stil Hintergrundfarbe basierend auf Zustand - eckig, Zelle

Ich habe einen Materialmattentisch und die Zelle hat eine Bedingung. Was ich tun muss, ist die Zelle zu färben, wenn die Bedingung erfüllt ist.

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

Ich brauche nur das N / A rot zu färben, sonst keine Farbe. Jede Hilfe wäre dankbar. Ich habe versucht, die Bindung mit der Bindungsbedingung style.background-color = "" rot "" ohne Erfolg zu umschließen.

Antworten:

Kannst du es versuchen :

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

und

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
}

Sie können einen bedingten Stil mit erstellen [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>