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

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

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>

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

1 个答案: