使用 if 表达式更改颜色编号

Question

我想使用 if expression 更改来自服务器的温度颜色，但我遇到错误

ERROR Error: Cannot find a differ supporting object '30'
    at KeyValueDiffers.push.

代码

transform(value: any, args?: any): any {

    let temp = value

    if (value>0 && value<10){
      return "dark-blue";
    }else if (value>11 && value<20){
      return "mid-blue";
    }else if (value>21 && value<30){
      return "light-blue";
    }else if (value>31 && value<39){
      return "aqua";
    }else if (value>40 && value<45){
      return "yellow";
    }else if (value>46 && value<49){
      return "light-orange";
    }else if (value>50 && value<70){
      return "red";
    }

    return temp

  }

有什么解决办法吗？

Answer 1

您收到此错误是因为如果您将 30 作为管道的输入并且它 returns 30，这不是有效的 class 名称。

确保 return 空 class 或默认颜色（如果没有匹配项），在您的情况下，您可能想将 < 更改为 <= 以处理30.

此外，如果您输入的是数字，请将值参数键入为数字，输出为字符串：

@Pipe({ name: 'temperature' })
export class TemperaturePipe implements PipeTransform {
  transform(value: number): string {
    if (value > 0 && value <= 10) {
      return 'dark-blue';
    }else if (value > 11 && value <= 20) {
      return 'mid-blue';
    }else if (value > 21 && value <= 30) {
      return 'light-blue';
    }else if (value > 31 && value <= 39) {
      return 'aqua';
    }else if (value > 40 && value <= 45) {
      return 'yellow';
    }else if (value > 46 && value <= 49) {
      return 'light-orange';
    }else if (value > 50 && value <= 70) {
      return 'red';
    } else {
      return '';
    }
  }
}

Answer 2

尝试用括号括起来：

(item.temperature | tempture) or "{{ item.temperature | tempture }}"

同时更改 if 和 else 的逻辑以涵盖所有值。

使用 if 表达式更改颜色编号

using if expression to change color numbers

angular

ionic4