我有一个来自我的API的数据元素来显示价格和一些百分比数据。根据数字,我想给予负数红色和0以及绿色以上的数字。我在Angular文档中看到你可以使用ngstyle和ngClass。我决定选择ngClass,这样我就可以在其他页面中重用代码。这是我所拥有的:
<ion-row>
<div>{{Prices}}</div>
</ion-row>
还有
<ion-row>
<div>{{PricesPercentage}}</div>
</ion-row>
数据如下所示:
价格:
1304.53
价格百分比:
2.33906,-0.04118秒
当它是负数的时候,我想把css类的值设为红色.
.green-color{
color:green;
}
.red-color{
color:red;
}
我已经在谷歌上搜索解决方案,这是我所尝试的:
解决方案1:使用函数
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 function
解决方案2:ngClass本身的条件
<div [ngClass]="{'red-color' : (PricesPercentage) < 0.00, 'green-color' : (PricesPercentage) >= 0.00}">{{PricesPercentage}}</div>
How to use ng-class to achieve positive and negative styling angularJs?
我使用以下文档将ngClass转换为较新的版本:
https://angular.io/api/common/NgClass
我更喜欢解决方案2。当我打开我的应用程序时,它不会改变颜色。
有人能给我指个方向吗?
1条答案
按热度按时间x9ybnkn61#
您的
[ngClass]
实现是错误的。下面是您应该执行的操作。[ngClass]="PricesPercentage > 0 ? 'green-color' : 'red-color'"
我现在创建Here is a link to a stackblitz是为了帮助您了解
[ngClass]
的运行情况。