Angular ng Class mat-list-item添加条件以应用背景颜色

Question

我一直在尝试将背景颜色与ngClass应用于mat-list和mat-list-item。如果条件为真，则背景颜色为黄色，否则保持正常白色。当我只是申请常规

style="background-color:yellow" 

在我的html代码中，所有mat-list-item单元格都有黄色背景颜色。

我改变了以下哪个不起作用

[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类添加到mat-list ngClass，但它将所有子mat-list-item更改为mat-list下的黄色背景颜色。如果myData.hasAlert的条件为真，我只需要将背景应用于某些mat-list-item单元格。

我尝试使用以下css

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

.highlight   {
  background-color: yellow;
}

任何帮助表示赞赏。谢谢。

Answer 1

使用ngClass，根据the documentation，这是你应该使用的正确语法：

<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;
}

Answer 2

您的班级声明无效。

更改为以下代码

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

Answer 3

您可以使用以下语法代替ngClass：

 <mat-list [class.my-list-black-font]="test.IsNotRedAlert">