如何在Angular中循环不同的行(引导行)？

Question

我在问自己:如何使用*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-code

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

因为这对于一行中的元素是正确的。我如何才能做到这一点？

Answer 1

选项1

最快的选择是使用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>

选项2

将数组拆分为数组块并遍历它们。

控制器

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>

Answer 2

如果col6是固定的，你可以在没有第二个循环的情况下实现它。

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

这将如您所期望的那样。

Answer 3

从模式上看，它看起来像一个外部循环和一个内部循环将解决问题。外部循环将控制"row“- div内部循环将控制"col-6”- div请试一试。