javascript - 在某些迭代中更改 div 中的类

Question

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

 <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>

具有以下功能:

 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>

我会得到这个:

 <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>

此结果只有“粉红色”类。我如何才能将这个类操纵为“蓝色”或“黄色”？

Answer 1

我不知道你们挑选颜色的规则是什么。你可以添加到你的 Controller :

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

然后在你的模板中:

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