在Ionic/Capacitor中使用带有正负数字的ngClass并改变颜色

Question

我有一个来自api的数据元素来显示价格和一些百分比数据。根据数字，我想用红色表示负数，用绿色表示0及以上的数字。我在Angular的文档中看到，你可以使用ngstyle和ngClass。我决定选择ngClass，这样我就可以在其他页面中重用代码。这是我的文件:

<ion-row>
<div>{{Prices}}</div> 
</ion-row> 

和

<ion-row>
<div>{{PricesPercentage}}</div> 
</ion-row> 

数据如下:

价格:

1304.53PricesPercentage:

2.33906,-0.04118

当它为负时，我想给css类设置为红色

.green-color{
color:green;
}
.red-color{
color:red;
}

我在谷歌上搜索了解决方案，这就是我所尝试的:

方案一:使用函数

checkNumberColor(numberCheck) {
if (this.numberCheck >= 0,0) {
return 'green-color';
}
if (this.numberCheck < 0,0) {
return 'red-color';
}   
}

我这样绑定:

<div [ngClass]="checkNumberColor(PricesPercentage)">{{PricesPercentage}}</div> 

我已经测试了这个，没有工作。chrome开发工具没有错误

Angular 2的ngClass函数

解决方案2:ngClass本身的条件

<div [ngClass]="{'red-color' : (PricesPercentage) < 0.00, 'green-color' : (PricesPercentage) >= 0.00}">{{PricesPercentage}}</div> 

如何使用ng-class来实现angularJs的正向和反向样式?

我用这个文档把ngClass转换成一个新版本:

https://angular.io/api/common/NgClass

我更喜欢解决方案2。当我打开我的应用程序，它不改变颜色。

谁能给我指个正确的方向?

Answer 1

您对[ngClass]的实现是错误的。你应该这样做。[ngClass]="PricesPercentage > 0 ? 'green-color' : 'red-color'"

这里是我现在创建的stackblitz的链接，以帮助您看到[ngClass]的作用。