Angular ngClass mat-list-item добавляет условие для применения цвета фона
Я пытался применить цвет фона с помощью ngClass к матовому списку и элементу матового списка. Если условие истинно, цвет фона желтый, в противном случае он остается обычным белым. Когда я просто применяю обычный
style = "background-color:yellow"
в моем html-коде все ячейки элемента списка матов имеют желтый цвет фона.
Я изменил его следующим образом, который не работает
[ngClass] = "myData.hasAlert ? 'highlight-color' : 'normal-color'"
[ngClass] = "{'highlight-color' : myData.hasAlert }"
в качестве теста я даже пробую ng-style="{highlight: myData.hasAlert}", но ничего не работает.
Вот мой код
<div class = "ng-container" >
<mat-list [ngClass] = "test.IsNotRedAlert ? 'my-list-black-font' : 'my-list-red-font'">
<!-- insert the subtotals-->
<mat-list-item
fxLayoutAlign = "end"
class = "metric-possition"
*ngFor = "let myData of AllData"
class = "background-color:yellow">
{{myData.balance}}</span>
</mat-list-item>
</mat-list>
</div>
сначала я добавил класс css в список матов ngClass, но он изменил все дочерние элементы списка матов на желтый цвет фона под списком матов. Мне нужно применить фон только к определенной ячейке элемента списка матов, если условие myData.hasAlert истинно.
Я пробовал со следующим css
.highlight .mat-list-item {
background-color: yellow;
}
.highlight {
background-color: yellow;
}
любая помощь приветствуется. Спасибо.
Ответы 3
Используя ngClass, это правильный синтаксис, который вы должны использовать в соответствии с документация:
<some-element [ngClass] = "{'first': true, 'second': true, 'third': false}">...</some-element>
Итак, в вашем случае это будет:
<mat-list-item [ngClass] = "{'yellow-background': myData.hasAlert}">
И в вашем файле css:
.yellow-background {
background-color: yellow;
}
Ваше объявление класса недействительно.
Изменить код ниже
<div class = "ng-container">
<mat-list>
<!-- insert the subtotals-->
<mat-list-item *ngFor = "let myData of allData"
[ngClass] = "{'highlight':myData.hasAlert}">
{{myData.balance}}
</mat-list-item>
</mat-list>
</div>
Вместо ngClass вы можете использовать этот синтаксис:
<mat-list [class.my-list-black-font] = "test.IsNotRedAlert">
class = "background-color:yellow" недопустимый формат для класса, для корректного формата проверьте мой ответ