我从 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演示,我可以使用一些建议来解决我的问题。
最佳答案
我会建议这样的事情:
<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 : ' '}}</span>
</li>
</ul>
并添加到CSS:
.offline {
background-color: gray;
}
关于html - 根据响应属性 Angular 更改背景颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58077464/