Ionic 使用带有正数和负数的ngClass并在离子/电容器中更改颜色

xlpyo6sf  于 2022-12-09  发布在  Ionic
关注(0)|答案(1)|浏览(102)

我有一个来自我的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。当我打开我的应用程序时,它不会改变颜色。
有人能给我指个方向吗?

x9ybnkn6

x9ybnkn61#

您的[ngClass]实现是错误的。下面是您应该执行的操作。[ngClass]="PricesPercentage > 0 ? 'green-color' : 'red-color'"
我现在创建Here is a link to a stackblitz是为了帮助您了解[ngClass]的运行情况。

相关问题