如何为Angular中*ngFor循环的内容动态循环添加类名？

你这个需求其实用Angular *ngFor 自带的索引就能轻松搞定，而且你已经找对核心思路啦！

具体实现步骤： #

1. 在*ngFor中获取循环索引
   在*ngFor指令里添加let i = index，这样就能拿到当前循环项的索引值。
2. 利用取模运算循环复用类名
   用索引i对classNames数组的长度取模（i % classNames.length），这样当索引超出类名数组长度时，会自动回到数组开头，实现类名的循环复用。

完整代码示例： #

component.ts

export class YourComponent {
  cards = [/* 你的cards数据集合 */];
  classNames = ['red', 'yellow', 'blue', 'green'];
}

component.html

<div *ngFor="let card of cards; let i = index">
  <!-- 将类名绑定到目标div上 -->
  <div [class]="classNames[i % classNames.length]">
    <div class="card">
      <!-- 卡片内部内容 -->
    </div>
  </div>
</div>

效果说明： #

当cards有6个元素时，索引i从0到5，对应类名如下：

• i=0 → 0%4=0 → 取classNames[0] → red
• i=1 → 1%4=1 → 取classNames[1] → yellow
• i=2 → 2%4=2 → 取classNames[2] → blue
• i=3 → 3%4=3 → 取classNames[3] → green
• i=4 → 4%4=0 → 取classNames[0] → red
• i=5 → 5%4=1 → 取classNames[1] → yellow
  完全匹配你想要的循环复用类名的效果！

额外小提示： #

如果classNames存在为空数组的可能性，为了避免报错，可以加个默认值兜底：

<div [class]="classNames[i % classNames.length] || ''">

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