html - 根据响应属性 Angular 更改背景颜色

Question

我从 API 请求数据，然后我得到响应对象，所以使用 *ngFor，我设法显示了一些我想要的数据，问题是一些 css 需要根据响应属性实现，对于我的数据，我有银行和状态列表。基于属性状态离线我需要更改背景颜色，只需要显示 Offline 状态 only.I had managed to change the background color, this is what I had tried:

html文件

<ul class="ul1">
  <li 
  [style.background]="getBackgroundColor(p.status)"
   class="li1" *ngFor="let p of myData?.paymentChannels">
  <span>{{p.name}}</span>
  <br>
  <span>{{p.status}}</span>
  </li>
</ul>

ts 文件

  getBackgroundColor(status) {
    switch (status) {
      case 'Offline':
      return 'grey';
    }
  }

预期输出:

这也是我的stackblitz演示，我可以使用一些建议来解决我的问题。

Answer 1

我会建议这样的事情:

<ul class="ul1">
  <li 
  [ngClass]="{offline: p.status == 'Offline'}"
   class="li1" *ngFor="let p of myData?.paymentChannels">
  <span>{{p.name}}</span>
  <br>
  <span> {{p.status == 'Offline' ? p.status : '&nbsp;'}}</span>
  </li>
</ul>

并添加到CSS:

.offline {
  background-color: gray;
}