试图同时循环元素和设置样式

Question

我有一个角度材料表

(HTML(

<table mat-table
[dataSource]="dataSource" multiTemplateDataRows
class="mat-elevation-z8">
<ng-container *ngIf="{{column}}" matColumnDef="{{column}}" *ngFor="let column of displayedColumns">
<th mat-header-cell *matHeaderCellDef> {{column}} </th>
<td mat-cell *matCellDef="let element"> {{element[column]}} </td>
</ng-container>

如果元素等于"Missing"，我想更改元素的样式(例如｛｛element[column｝｝＝=Missing，然后更改样式(。

(样式((HTML(

<mat-chip *ngIf="element.status=='Missing'" style="background-color: #ec9d9d; color: red">Missing</mat-chip>

我如何在HTML中做到这一点？我只想在displayedColumn的"status"等于"Missing"时执行此操作。

(打字(

displayedColumns: string[] = [
'id',
'tradingPartnerTradingPartner',
'fileFormatFileFormat',
'status',
];

Answer 1

您可以使用ng class指令

在您的示例中，使用它应该是这样的：(假设垫子芯片会被放入这个单元格，我在下面修改了(

<table mat-table [dataSource]="dataSource" multiTemplateDataRows
class="mat-elevation-z8">
<ng-container *ngIf="{{column}}" matColumnDef="{{column}}" *ngFor="let column of displayedColumns">
<th mat-header-cell *matHeaderCellDef> {{column}} </th>
<td mat-cell *matCellDef="let element"
[ngClass]="{missing: element.status=='Missing' }"> {{element[column]}} </td>
</ng-container>
...

不要忘记为我们在ngClass指令中引用的.missing类创建css：

.missing {
background-color: #ec9d9d;
color: red
}