我在问自己:如何使用*NGFOR循环遍历不同的行？ 假设给定一个数组
let arr = [1,2,3,4] // arr can have a arbitrary number of elements
现在我要循环这个数组并显示值。 我希望一行中有两个元素（使用bootstrap 4.0）。 我的做法:
<div class="row">
<div class="col-6" *ngFor="let el of arr"> {{el}} </div>
</div>
现在我有了这个HTML代码
<div class="row">
<div class="col-6"> 1 </div>
<div class="col-6"> 2 </div>
<div class="col-6"> 3 </div>
<div class="col-6"> 4 </div>
</div>
但我想这样:
<div class="row">
<div class="col-6"> 1 </div>
<div class="col-6"> 2 </div>
</div>
<div class="row">
<div class="col-6"> 3 </div>
<div class="col-6"> 4 </div>
</div>
因为这对于一行中的元素是正确的。 我怎样才能做到这一点呢？
最快的选择是使用slice管道。 但可能不适合大型数据集。
<div class="row">
<div class="col-6" *ngFor="let el of arr | slice:0:2"> {{el}} </div>
</div>
<div class="row">
<div class="col-6" *ngFor="let el of arr | slice:2:4"> {{el}} </div>
</div>
将数组拆分成数组块并循环遍历它们。
控制器
export class AppComponent {
arr = [1,2,3,4];
finalArr = []; // <-- [[1,2], [3,4]]
constructor(private http: HttpClient){
for (let i = 0, j = this.arr.length; i < j; i += 2) {
this.finalArr.push(this.arr.slice(i, i + 2));
}
}
}
模板
<div class="row" *ngFor="let arr of finalArr">
<div class="col-6" *ngFor="let el of arr"> {{el}} </div>
</div>
你可以在没有第二个循环的情况下实现它，前提是col-6是固定的。
<div>
<ng-container *ngFor="let el of arr; index as i">
<div class="row" *ngIf="i%2 === 0">
<div class="col-6" > {{arr[i]}} </div>
<div class="col-6" > {{arr[i+1]}} </div>
</div>
</ng-container>
</div>
这会像你所期望的那样。
从模式上看，一个外循环和一个内循环可以解决这个问题。 外循环将控制“行”-div内循环将控制“col-6”-div请试一试。
