Angular中如何从迭代对象拼接静态值生成类名？

哦，这个坑我之前踩过！你现在的写法会报错，是因为Angular模板里的[ngClass]对象字面量语法，默认只认静态字符串作为键，没法直接把'icon' + link.label这种动态拼接的内容当成键来解析。给你两种简单的解决办法：

方法1：使用计算属性名（适合需条件控制类的场景） #

如果之后你可能需要根据某些条件决定是否添加这个类，用这种写法最稳妥——把动态拼接的类名用[]包起来，作为对象的计算属性键，值设为true就会强制应用该类：

<ul style="font-size: 20px">
  <li *ngFor="let link of socialLinks" [ngClass]="{ ['icon' + link.label]: true }">{{link.label}}</li>
</ul>

这是ES6的计算属性名语法，Angular模板完全支持，能正确解析动态生成的类名。

方法2：直接绑定字符串拼接结果（更简洁的场景） #

如果你只是单纯要把icon和link.label拼接成类名，不需要条件判断，直接把拼接后的字符串绑定给[ngClass]就行，这种写法更清爽：

<ul style="font-size: 20px">
  <li *ngFor="let link of socialLinks" [ngClass]="'icon' + link.label">{{link.label}}</li>
</ul>

Angular会直接把这个字符串作为类名添加到<li>元素上，完全符合你的需求。

额外提醒 #

要确保link.label的值是合法的CSS类名哦——比如不能包含空格、特殊符号（除了-和_），如果后端返回的label可能有不符合的字符，建议在组件里先处理一下，比如转成小写、替换空格为-，避免样式不生效。

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