Angular中使用三元运算符报错：AppComponent不存在logItem属性

我在Angular组件的模板里用ngStyle调用getColor()方法，代码如下：

<div *ngFor="let logItem of log" [ngStyle]="{'background-color': getColor(logItem)}" [ngClass]="{'white-text': logItem >= 5}">{{ logItem }} </div>

在组件类（component.ts）里用if/else写getColor()方法时完全正常：

getColor(logItem){ 
  if (logItem >= 5) { 
    return 'blue'; 
  } else { 
    return 'green'; 
  } 
  // return this.logItem >= 5 ? 'blue' : 'white'; 
}

但把方法改成三元运算符的时候，就会报错：Property 'logItem' does not exist on type 'AppComponent'，这到底是为啥呀？

原因解析 #

你这里踩了一个很常见的小坑：在三元运算符里你错误地用了this.logItem，但logItem是getColor()方法的局部参数，不是组件类的成员属性！

• 用if/else的时候，你直接引用的是方法接收的参数logItem，它是每次调用方法时传入的循环项，所以逻辑完全没问题。
• 换成三元运算符时，你多写了this.，这会让Angular去你的组件类里查找名为logItem的属性，但你的组件类根本没定义这个属性，自然就抛出了不存在的错误。

修复方法 #

只需要把三元运算符里的this.logItem改成方法参数logItem即可，修正后的代码如下：

getColor(logItem){ 
  return logItem >= 5 ? 'blue' : 'green'; 
}

这样就和原来if/else的逻辑完全一致，不会再出现报错啦。

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