Angular 6 динамически применяет класс CSS к матовой ячейке

У меня есть таблица материалов, в которой в зависимости от содержимого ячейки мне нужно использовать определенный класс CSS. Angular 6 динамически применяет класс 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>

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

Angular 6 динамически применяет класс CSS к матовой ячейке

Помогите, что может быть не так?

Попробуйте использовать [ngClass] вместо класса, а также не нужно использовать скобки "{}" для записи row.warehouse. Вы можете написать это как <mat-cell [ngClass] = "row.warehouse...">

— 11.02.2019 18:41

Спасибо, но когда я использую этот <mat-cell ng-class = "row.warehouse == 'Успех'? Код состояния-успеха: (row.warehouse == 'Ошибка'? Код состояния-сбой: код состояния -empty)" *matCellDef = "let row"> {{row.warehouse}} </mat-cell> стиль вообще не применяется ((

— 11.02.2019 18:56

css angular angular-material material-design

11.02.2019 18:35

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

5 828

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

Да, спасибо, действительно опечатка. Однако ничего не изменилось.. Он по-прежнему работает некорректно. Розовый фон повсюду

— 11.02.2019 19:03

Попробуйте использовать ngClass. Уберите интерполяцию и включите все class names в single quotes. Проверить обновленный ответ

— 11.02.2019 19:07

Да, с [ngClass] все работает отлично! Большое Вам спасибо

— 11.02.2019 19:14

Кстати, может у вас есть идея, как сделать эти статусы со слегка закругленными углами и с отступом, как на 1-й картинке? Изменение стиля на .status-code-success{ flex: 0 0 10% !important; ширина: 10% !важно; фон: rgb(196 214 160); цвет: RGB(80,99,42); поля: 5px 5px 5px 5px; } дает это поле остальным ячейкам, что неприемлемо

— 11.02.2019 19:27

Попробуйте что-то вроде border-radius: 20px для этого

— 11.02.2019 19:46

Я реализовал такое же решение, но что, если я хочу переместить логику ngClass в файл ts, вызовите его в html.

— 06.10.2021 04:39

11.02.2019 18:50