Ionic/Angular如何更改字符串值的样式

Question

电视连续剧项目。它显示徽章内的贪婪点数(IMBD点数(。我的数据来自json。如果这个点大于8.0，我想让徽章背景颜色变成绿色，如果它的6.0-8.0变成黄色，如果它是5-那么红色。我该怎么做？谢谢你的帮助！

我试着做得像

<ion-badge *ngIf="item.vote_average>8" style="background-color: rgb(110, 109, 37);">

它有效，但我不能检查所有情况。我可以像c#一样制作if吗？我试过了，但也没用。它只允许我使用1*ngIf

Answer 1

更好的方法是使用CSS类。根据需要设置颜色。我只是在每节课上都加了同样的内容。

您的CSS文件

.larger-than-eight{
background-color: rgb(110, 109, 37);
}
.six-to-eight{
background-color: rgb(110, 109, 37);
}
.less-than-six{
background-color: rgb(110, 109, 37);
}

HTML

<ion-badge [class]="getClass(item.vote_average)">

TS文件

getClass(value: number): string {
if (value > 8) {
return 'larger-than-eight';
}
if (value > 6 && value < 8) {
return 'six-to-eight';
}
if (value < 6) {
return 'less-than-six';
}
}

Answer 2

有很多方法可以做到这一点。

例如，您可以尝试以下任何一种：

• ngSwitch

• ngStyle

• 写入返回正确颜色代码的函数：

  [样式.背景颜色]="；item.vote_average>8？'rgb(110，109，37('："rgb(10，23，0('"；