Angular 12.0.0及以下版本可选链括号语法解析错误替代写法咨询

Angular 12.2.0 版本才正式支持模板内可选链后接方括号动态访问属性的语法（即item?.[fieldName]写法），12.0.x及更低版本的模板解析器无法识别该语法，因此会抛出对应的解析错误。

• 方案1：模板内用逻辑与运算符替代可选链
  直接把可选链拆成传统的判空+动态取值写法，模板原生支持，无额外开销：

  <p [style.background]="item && item[fieldName]">
    Some Text
  </p>
  

  如果需要加默认背景值，可扩展为：

  <p [style.background]="item && item[fieldName] ?? 'transparent'">
    Some Text
  </p>
  

• 方案2：TS层提前封装取值逻辑
  可以在组件TS中写一个纯getter封装取值逻辑，模板直接绑定getter即可，相比调用函数性能更高，尤其是在使用ChangeDetectionStrategy.OnPush的组件中，仅当item或fieldName变更时才会重新计算：
  TS代码：

  item =  { warn: 'yellow', success: 'green', error: 'red' };
  fieldName = 'success';
  
  get currentBgColor() {
    return this.item?.[this.fieldName] ?? '';
  }
  

  模板代码：

  <p [style.background]="currentBgColor">
    Some Text
  </p>
  

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