Angular5项目使用ngClass指令抛出模板解析异常问题求助

模板解析报错的直接诱因是ngClass绑定的表达式语法完全不合法：

• Angular 5 中ngClass的对象语法约定必须是{目标类名: 布尔控制值}的键值对结构，你当前写的{'chart-title-value' , 'text-right'}在对象字面量里只有两个孤立字符串，既没有冒号分隔的键值映射，也不符合JS语法规则，模板编译器在解析阶段就会直接抛出解析错误。
• 你的scss规则中无点的chart-title是元素选择器，仅会匹配名为<chart-title>的自定义标签，和类名.chart-title-value混写属于冗余规则，不会触发当前报错，但后续可能出现样式匹配不符合预期的问题。

结合你需要给元素固定添加两个类的需求，三种合规写法任选其一即可：

• 最推荐的无冗余写法：因为两个类名不需要随状态动态变化，直接用原生class属性即可，性能最优

  <div *ngSwitchCase="'currency'" class="chart-title-value text-right">
       {{ campaign.breakdown.total | pcCurrency }}
     <span class="text-muted">/ {{ campaign.budget | pcCurrency }}</span>
  </div>
  

• 适配后续动态类扩展的ngClass对象写法：补全所有类名固定为true的映射值

  <div *ngSwitchCase="'currency'" [ngClass]="{'chart-title-value': true, 'text-right': true}">
       {{ campaign.breakdown.total | pcCurrency }}
     <span class="text-muted">/ {{ campaign.budget | pcCurrency }}</span>
  </div>
  

• ngClass数组语法写法：适合后续需要拼接静态/动态类名数组的场景

  <div *ngSwitchCase="'currency'" [ngClass]="['chart-title-value', 'text-right']">
       {{ campaign.breakdown.total | pcCurrency }}
     <span class="text-muted">/ {{ campaign.budget | pcCurrency }}</span>
  </div>
  

可将组件scss规则调整为精准匹配类名的形式，避免冗余的元素选择器：

.chart-title-value {
  font-size: 18px;
}

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