Question

我有一个名为applicationArray的对象数组，其中包含12个“应用程序”元素。我需要在每行3 application批次中使用bootstrap div.row和div.col-sm-4来显示这些application。

这样的事情：

<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并告诉它将数组分成批并动态显示？

谢谢！

Answer 1

你可以这样做，

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

Answer 2

您可以使用一个函数将其拆分为组件中的批处理，然后在模板中渲染每个批处理：

模板：

 <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));
    }
  }

这里是一名掠夺者：https://plnkr.co/edit/prkYEaDc8rpJI1hR8tqE?p=preview

Answer 3

在我们的后端分批包装它们：

如果您有applications[]将其{4} {4} {4}组装成{/ 1}}

applicationBatches

如果你引入了一些applicationBatches = [ [application1, application2, application3], [application4, application5, application6] ... ]设置，你可以拥有一个接收批量大小并相应打包的函数。这样你就可以使用一个干净的模板来绑定外部/内部集合。

Angular（4）：ngFor批量？

3 个答案: