Angular中[ngClass]拼接组件变量的正确语法咨询

你的代码报错核心问题是在[ngClass]的表达式里错误使用了插值语法{{}}——[ngClass]本身绑定的是TypeScript表达式上下文，直接引用组件变量即可，不需要套插值符号。

修正后的基础写法 #

<label 
  [ngClass]="rating.Service === '4' 
    ? 'consultant-rating consultant-rating-selected-1' + iconLanguage 
    : 'consultant-rating consultant-rating-1' + iconLanguage" 
  for="consultant-1">
</label>

更简洁的优化写法 #

把公共类consultant-rating单独提取到普通class属性中，减少重复代码，可读性更强：

<label 
  class="consultant-rating"
  [ngClass]="rating.Service === '4' 
    ? 'consultant-rating-selected-1' + iconLanguage 
    : 'consultant-rating-1' + iconLanguage" 
  for="consultant-1">
</label>

额外提示 #

建议用===严格相等运算符替代==，避免类型隐式转换带来的潜在问题，这是Angular开发中的最佳实践之一。

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