Angular中动态绑定Weather Icons SCSS类失效问题求助

你的问题出在Angular属性绑定的语法错误上——在[class]属性绑定内部，不需要再嵌套插值表达式{{}}，因为属性绑定本身就支持直接写表达式逻辑。你原来的写法会把插值的语法字符也当成类名的一部分，导致实际生成的类名不符合预期。

正确写法示例： #

方式1：直接字符串拼接（括号包裹管道表达式）

<i [class]="'wi wi-day-' + (weather.daily.weathercode[0] | lowercase)"></i>

方式2：ES6模板字符串（更直观）

<i [class]="`wi wi-day-${weather.daily.weathercode[0] | lowercase}`"></i>

方式3：使用ngClass绑定（推荐，更灵活）

<i [ngClass]="['wi', 'wi-day-' + (weather.daily.weathercode[0] | lowercase)]"></i>

以上写法都会正确生成和你第3行打印结果一致的类名，图标就能正常动态切换了。

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