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

您可以使用[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

你可以尝试：

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

基于条件的angular5风格背景颜色

2 个答案: