Angular中如何在*ngFor循环里动态变更元素类名

嘿，这个需求很常见，我来帮你快速搞定！你已经用到了*ngFor里的index变量，只需要结合Angular的属性绑定就能轻松生成带递增序号的class啦。

核心解决方案 #

直接通过[class]属性绑定，把固定前缀dummy__和index + 1拼接起来（因为index默认从0开始，加1才能得到你要的1、2、3序号）：

<div [class]="'dummy__' + (i + 1)" *ngFor="let item of dummy.pic; let i = index"></div>

为什么这么写？ #

• [class]是Angular的属性绑定语法，会把右侧表达式的计算结果直接作为元素的class属性值
• (i + 1)确保序号从1开始递增，完美匹配你想要的dummy__1、dummy__2、dummy__3格式

另一种可选写法（用ngClass） #

如果后续需要更复杂的class判断逻辑，也可以用ngClass实现，效果完全一致：

<div [ngClass]="{'dummy__' + (i + 1): true}" *ngFor="let item of dummy.pic; let i = index"></div>

这样修改后，循环生成的div就会依次带上你需要的递增class名称啦！

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