代码之家 › 专栏 › 技术社区 › MaterialGirl

Angular 6动态将CSS类应用于mat单元格

material-design angular-material angular css

MaterialGirl · 技术社区 · 5 年前

我有一个材料表,根据单元格的内容,我需要使用特定的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>

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

请帮忙,可能出什么事了?

1 回复 | 直到 5 年前

Amit Chigadani 5 年前

试试这个 [ngClass] .

使用时可能需要进行以下更改 ngClass :

*删除插值 {} 针对每个变量
*包括所有 class names 在里面 single quotes .

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

推荐文章

user19531657 · 如何将标题和按钮对齐在同一行?

2 年前

Marcus Edensky · 角度6材质:材质选项卡链接由下划线栏选择

6 年前

Carl.G · 如何将Angular 6 Material sidenav设置为从屏幕右侧从右向左打开

6 年前

spottedmahn · 覆盖只读/禁用样式/CSS

6 年前

bereket gebredingle · 具有列值的物料表数据源筛选器

6 年前

Rahul Munjal · 无法绑定到“dataSource”,因为它不是“table”的已知属性

6 年前

Billy G · “角度材质”对话框:如何在父零部件中更改注入的数据时更新这些数据?

6 年前

Kaushik Nath · 导入MatTabChangeEvent时出错

6 年前

The Fox · “角度材质”对话框:复选框始终返回false

6 年前

Chinaedu Onwukwe · 在鼠标上方展开“材质扩展”面板

6 年前