Angular ngFor循环中动态绑定类报错，求正确实现方式

你遇到的模板解析错误，核心原因是错误地在Angular属性绑定语法[ngClass]中混用了插值表达式{{}}，这是Angular模板开发里的常见小误区。

为什么会报错？ #

当使用方括号[]进行属性绑定时，Angular会把括号内的内容当作TypeScript表达式直接解析，不需要再套一层插值语法。你写的[ngClass]="{{forecast.condition}}"相当于把插值后的字符串（比如"sunny"）当成了表达式，完全不符合Angular的模板解析规则，所以触发了一连串的语法错误。

几种可行的解决方案 #

方案1：直接使用属性绑定（推荐）

去掉插值表达式，直接绑定forecast.condition到[ngClass]：

<div class="forecast-icon" [ngClass]="forecast.condition"></div>

这样Angular会自动将forecast.condition的字符串值作为类名添加到元素上，正好生成你期望的<div class="forecast-icon sunny"></div>。

方案2：直接在class属性中使用插值

如果更习惯用插值语法，也可以直接在原生class属性里拼接类名：

<div class="forecast-icon {{forecast.condition}}"></div>

这种方式同样能达到效果，适合简单的类名拼接场景。

方案3：ngClass对象语法（进阶扩展）

如果以后需要根据条件动态控制类的添加/移除，可以用对象语法（当前场景用不到，但可以作为参考）：

<div class="forecast-icon" [ngClass]="{ [forecast.condition]: true }"></div>

这里利用ES6计算属性名，将forecast.condition的值作为键，true表示始终添加这个类。

额外说明 #

因为你已经确认forecast.condition是有效字符串，且循环内其他属性正常工作，上述方案都能直接生效，完全不需要在TypeScript中额外处理，纯HTML模板就能实现你的需求。

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