Angular 6 динамически применяет CSS-класс к mat-cell - PullRequest
Новая
       7

Angular 6 динамически применяет CSS-класс к mat-cell

0 голосов
/ 11 февраля 2019

У меня есть таблица материалов, в которой в зависимости от содержимого ячейки мне нужно использовать определенный класс CSS.enter image description here

Я использую следующие классы 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>

Однако у меня есть только одна строкаданные с «Успехом» в ячейке Warehouse, но это дает мне стиль с розовым фоном

enter image description here

Пожалуйста, помогите, что может быть не так?

1 Ответ

0 голосов
/ 11 февраля 2019

Попробуйте это с помощью [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);
}
...