Угловое условие добавления ngClass mat-list-item для применения цвета фона - PullRequest
Новая
       8

Угловое условие добавления ngClass mat-list-item для применения цвета фона

1 голос
/ 28 марта 2019

Я пытался применить цвет фона с помощью ngClass для mat-list и mat-list-item. Если условие истинно, цвет фона - желтый, иначе он остается нормальным белым. Когда я просто применяю обычный 

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, но он изменил весь дочерний элемент списка матов на желтый цвет фона под списком матов. Мне нужно только применить фон к определенной ячейке элемента mat-list-item, если условие myData.hasAlert истинно.

Я пробовал со следующим css 

.highlight .mat-list-item {
  background-color: yellow;
}

.highlight   {
  background-color: yellow;
}

любая помощь приветствуется. Спасибо.

Ответы [ 3 ]

1 голос
/ 28 марта 2019

Используя 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;
}
0 голосов
/ 28 марта 2019

Вместо ngClass вы можете использовать этот синтаксис: 

 <mat-list [class.my-list-black-font]="test.IsNotRedAlert">
0 голосов
/ 28 марта 2019

Ваше объявление класса недействительно.

Изменить на приведенный ниже код 

<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>
...