Использование ng-класса в *ngFor для условного форматирования ячейки таблицы в Angular 11
Я заполняю содержимое таблицы, используя *ngFor для циклического просмотра содержимого массива.
Таблица заполняется просто отлично, но я хочу изменить фон ячейки на основе значения, которым она была заполнена (например, зеленый, если значение «пройдено», и красный, если значение «не пройдено».
Подход, который я использую, состоит в том, чтобы использовать ng-class для оценки содержимого значения элемента массива и использовать его для установки фона, но он не работает.
Компонент HTML
<tr *ngFor = "let e of list;">
<td>{{ e.description}}</td>
<td ng-class = "{'Pass' : {{e.status}} =='Pass', 'Fail' : {{e.status}} =='Fail'}">{{ e.status }}
</td></tr>
Компонент CSS
.Pass {
background-color: green;
}
.Fail {
background-color: red;
}
ng-class для angularjs, а не для angular. Как уже упоминалось, используйте [ngClass].
Ответы 1
Решение:
<tr *ngFor = "let e of list;">
<td>{{e.description}}</td>
<td [ngClass] = "{Pass: e.status === 'Pass', Fail: e.status === 'Fail'}">{{e.status}}
</td>
</tr>
Или, если статус может быть либо пройден, либо не пройден — мы можем проверить условие один раз с помощью тернарного оператора:
[ngClass] = "e.status=== 'Pass'? 'Pass' : 'Fail'"
Несколько вещей:
- Классы CSS обычно не пишутся с заглавной буквы.
- Вам не нужно интерполировать внутри ngClass.
{'Pass' : {{e.status}} == 'Pass', 'Fail' : {{e.status}} == 'Fail'} <-- e.status not {{e.status}}
- Я бы придерживался обычного [ngClass] (есть и другие способы применения динамического класса в Angular, но этот используется чаще всего).
Повлиял ли этот подход на производительность таблицы с более чем 1000 столбцов для оценки? Если да, то каков идеальный способ обработки подобных запросов
Мог бы проверить [ngClass]