Angular（4）：ngFor批量？

我有一個對象數組叫applicationArray與12'應用程序'元素。我需要通過使用引導div.row和div.col-sm-4以每行3 application的批次顯示這些application。Angular（4）：ngFor批量？

事情是這樣的：

<div class="row"> 
    <div class="col-sm-4 p-top-buffer"> 
     <application></application> 
    </div> 
    <div class="col-sm-4 p-top-buffer"> 
     <application></application> 
    </div> 
    <div class="col-sm-4 p-top-buffer"> 
     <application></application> 
    </div> 
</div>

是它在某種程度上可以使用ngFor並告訴它分割成數組批次，動態顯示呢？

謝謝！

來源

2017-09-18 Deniss M.

你可以有一個分割成批次的組件的功能，然後渲染模板中每個批次：

模板：

<div *ngFor="let batch of batches" class="row"> 
     <div *ngFor="let application of batch" class="col-sm-4 p-top-buffer"> 
      {{application.number}} 
     </div> 
    </div>

組件：

batches = []; 

    ngOnInit(){ 
    this.splitIntoBatchesOfThree(this.applicationArray); 
    } 

    constructor() {} 

    splitIntoBatchesOfThree(applicationArray) 
    { 
    while(applicationArray.length) { 
     this.batches.push(applicationArray.splice(0,3)); 
    } 
    }

這裏有一個plunker：https://plnkr.co/edit/prkYEaDc8rpJI1hR8tqE?p=preview

來源

2017-09-18 18:06:07 bgraham

這是一個不錯的解決方案，但我決定使用角度材料2'grid-list'，它基本上爲你做了所有這些。列和它根據這個參數和數組大小的大小繪製行。 –

聽起來真的很棒！ – bgraham

你可以做到這一點，

<ng-container *ngFor="let product of applicationArray;let i = index""> 
<div *ngIf="i % 3 == 0" class="row"> 
     <div class="col-xs-4"> <application></application></div> 
</div> 
</ng-container>

來源

2017-09-18 17:07:54 Sajeetharan

這是角度4.你提供angul的語法ar 1.x :) –

@DenissM。更新它:) – Sajeetharan

你不能在一個元素上有多個模板綁定。 –

收拾他們在我們的後端的3批：

，如果你有12 applications[]收拾他們在4 applicationBatches像

applicationBatches = [ 
[application1, application2, application3], 
[application4, application5, application6] 
... 
]

，如果你介紹一些applicationBatchSize設置你可以有一個功能，接收批量大小並相應地打包。這樣你有一個乾淨的模板只是綁定外部/內部集合。

來源

2017-09-18 17:17:42

Angular（4）：ngFor批量？

回答

相關問題