Angular 6 动态地将 CSS 类应用于 mat-cell

Question

我有材料表，根据单元格的内容，我需要使用特定的 CSS 类。

我使用以下 css 类

.status-code{
    flex: 0 0 10% !important;
    width: 10% !important;
}

.status-code-succsess{
    flex: 0 0 10% !important;
    width: 10% !important;
    background: rgb(196,214,160);
    color: rgb(80,99,42);
}

.status-code-failed{
    flex: 0 0 10% !important;
    width: 10% !important;
    background: rgb(229,185,181);
    color: rgb(97,38,33);
}

.status-code-empty{
    flex: 0 0 10% !important;
    width: 10% !important;
    background: rgb(216,216,216);
}

这是html

<ng-container matColumnDef="Warehouse">
                <mat-header-cell class="status-code" *matHeaderCellDef> Warehouse </mat-header-cell>
                <mat-cell class="{{row.warehouse}} == 'Success' ? status-code-success : ({{row.warehouse}} == 'Failed' ? status-code-failed : status-code-empty)" *matCellDef="let row"> {{row.warehouse}} </mat-cell>
            </ng-container>

            <ng-container matColumnDef="DPI">
                <mat-header-cell class="status-code" *matHeaderCellDef> DPI </mat-header-cell>
                <mat-cell class="{{row.dpi}} == 'Success' ? status-code-success : ({{row.dpi}} == 'Failed' ? status-code-failed : status-code-empty)" *matCellDef="let row"> {{row.dpi}} </mat-cell>
            </ng-container>

但是，我在仓库单元格中只有一行带有“成功”的数据，但它给了我粉红色背景的风格

请帮忙，有什么问题？

Answer 1

使用[ngClass] 试试这个。

您在使用ngClass 时可能需要进行以下更改：

*。针对每个变量删除插值{}
*。在single quotes 中包含所有class names。

<ng-container matColumnDef="Warehouse">
    <mat-header-cell class="status-code" *matHeaderCellDef> Warehouse </mat-header-cell>
    <mat-cell [ngClass]="row.warehouse == 'Success' ? 'status-code-success' : (row.warehouse == 'Failed' ? 'status-code-failed' : 'status-code-empty')"
         *matCellDef="let row"> {{row.warehouse}} </mat-cell>
</ng-container>

<ng-container matColumnDef="DPI">
    <mat-header-cell class="status-code" *matHeaderCellDef> DPI </mat-header-cell>
    <mat-cell [ngClass]="row.dpi == 'Success' ? 'status-code-success' : (row.dpi == 'Failed' ? 'status-code-failed' : 'status-code-empty')"
         *matCellDef="let row"> {{row.dpi}} </mat-cell>
</ng-container>

你的班级名称也有错别字。

将.status-code-succsess 更改为.status-code-success

.status-code-success{
    flex: 0 0 10% !important;
    width: 10% !important;
    background: rgb(196,214,160);
    color: rgb(80,99,42);
}