Ionic/Capacitor使用ngClass按数值正负切换颜色失效问题

失效核心原因 #

• 方案1函数逻辑错误：函数定义的入参是numberCheck，判断时错误使用this.numberCheck取值，没有读取到传入的实际参数；代码中>= 0,0的写法使用了JS逗号运算符，写法冗余不规范，会导致判断逻辑异常。
• 方案2模板语法错误：ngClass配置对象的条件结尾多写了多余逗号，Angular模板解析时会识别为语法错误，导致类名绑定失效；另外如果接口返回的数值是字符串类型，直接做大小比较会按字符序匹配，结果完全不符合预期。
• 样式优先级问题：Ionic内置组件有默认文字颜色样式，自定义类如果权重不够会被覆盖。

前置检查 #

先对接口返回值做类型校验，确保Prices、PricesPercentage为Number类型，如果是字符串类型先做转换：

// 接口返回后处理
this.Prices = Number(res.Prices);
this.PricesPercentage = Number(res.PricesPercentage);

如果自定义类不生效，先给样式加优先级：

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

正确实现方式 #

方案2（模板内直接判断，推荐单组件内使用） #

直接在ngClass中写正确的对象配置，去掉多余逗号：

<ion-row>
  <div [ngClass]="{'red-color': Prices < 0, 'green-color': Prices >= 0}">{{Prices}}</div> 
</ion-row> 

<ion-row>
  <div [ngClass]="{'red-color': PricesPercentage < 0, 'green-color': PricesPercentage >= 0}">{{PricesPercentage}}</div> 
</ion-row>

方案1（封装公共方法，适合多页面复用） #

修复函数的参数引用问题，去掉冗余写法：

// 公共方法，可放在公共服务/组件工具类中
checkNumberColor(numberCheck: number): string {
  return numberCheck >= 0 ? 'green-color' : 'red-color';
}

模板绑定写法：

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

内容的提问来源于stack exchange，提问作者Fearcoder