Javascript 在某个迭代中更改div中的类

基本上，这就是我想要实现的目标：

 <div  class="animations-player">
 <div class="block pink" id="block1">1</div>
<div class="block pink" id="block2">2</div>
 <div class="block yellow" id="block3">3</div>
<div class="block yellow" id="block4">4</div>
 <div class="block blue" id="block5">5</div>
<div class="block blue" id="block6">6</div>...
</div>

1.
2.
3.
4.
5.
6.

具有以下功能：

 createRange(len=32) {
    let arr = [];
    for(let i = 0; i < len ; i++) {
      arr.push(i);
    }
    return arr;
  }

 <div *ngFor="let item of createRange(32)">
  <div *ngIf="item>0" class="block pink" id="block{{item}}">{{item}}</div>
 </div>

createRange（len=32）{
设arr=[]；
for（设i=0；i

我会得到这个：

 <div  class="animations-player">
 <div class="block pink" id="block1">1</div>
<div class="block pink" id="block2">2</div>
 <div class="block pink" id="block3">3</div>
<div class="block pink" id="block4">4</div>
 <div class="block pink" id="block5">5</div>
<div class="block pink" id="block6">6</div>...
</div>

1.
2.
3.
4.
5.
6.

这个结果只有“粉红”一类。

---

我如何得到这个来操纵类为“蓝色”或“黄色”？

我不知道你选择颜色的规则是什么。您可以向控制器中添加：

getColorForBlock(index) {
  if (index % 6 < 2) {
    return "pink";
  } else if (index % 6 < 4) {
    return "yellow";
  } else {
    return "blue";
  }
}

getColorForBlock（索引）{
如果（索引%6<2）{
返回“粉红色”；
}否则如果（索引%6<4）{
返回“黄色”；
}否则{
返回“蓝色”；
}
}

然后在模板中：

<div *ngFor="let item of createRange(32)">
  <div *ngIf="item>0" [ngClass]="getColorForBlock(item)" class="block" id="block{{item}}">{{item}}</div>
</div>

{{item}}

您总是在应用

class=“block pink”

这意味着您将始终得到粉色，因为您没有指定任何其他颜色