如何在 Angular 中循环使用不同的行（引导行）？

Question

我问自己：你会如何使用 *ngFor 遍历不同的行？假设给定了一个数组let arr = [1,2,3,4] // arr can have a arbitrary number of elements现在，我想循环遍历该数组并显示值。我希望两个元素排成一行（使用引导 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>因为对于一行中的元素，这是正确的。我怎样才能做到这一点？

Answer 1

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

这将按照您的预期进行。

Answer 2

备选案文1

最快的选择是使用切片管。但它可能不适合大型数据集。

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

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