如何在 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> &nbsp;&nbsp;<ng-container&nbsp;&nbsp;*ngFor="let&nbsp;el&nbsp;of&nbsp;arr;&nbsp;index&nbsp;as&nbsp;i"> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="row"&nbsp;*ngIf="i%2&nbsp;===&nbsp;0"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="col-6"&nbsp;>&nbsp;{{arr[i]}}&nbsp;</div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="col-6"&nbsp;>&nbsp;{{arr[i+1]}}&nbsp;</div> &nbsp;&nbsp;&nbsp;&nbsp;</div> &nbsp;&nbsp;</ng-container></div>这将按照您的预期进行。

Answer 2

备选案文1最快的选择是使用切片管。但它可能不适合大型数据集。<div class="row">&nbsp; <div class="col-6" *ngFor="let el of arr | slice:0:2"> {{el}} </div></div><div class="row">&nbsp; <div class="col-6" *ngFor="let el of arr | slice:2:4"> {{el}} </div></div>备选案文2将数组拆分为数组块并循环访问它们。控制器export class AppComponent&nbsp; {&nbsp; arr = [1,2,3,4];&nbsp; finalArr = [];&nbsp; &nbsp; // <-- [[1,2], [3,4]]&nbsp; constructor(private http: HttpClient){&nbsp; &nbsp; for (let i = 0, j = this.arr.length; i < j; i += 2) {&nbsp; &nbsp; &nbsp; this.finalArr.push(this.arr.slice(i, i + 2));&nbsp; &nbsp; }&nbsp; }}模板<div class="row" *ngFor="let arr of finalArr">&nbsp; <div class="col-6" *ngFor="let el of arr"> {{el}} </div></div>

Answer 3

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