在格在某个迭代

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>