Javascript 角度2进入一个新的行

我希望建立一个网格的项目，打破每3个，并分裂成一个新的行，另3列。。我似乎无法用离子2/角度2直观地找到一种方法

在PHP中，我将使用以下方法解决这个问题

    <?php 


    echo '<div class="open-block">';
    $i = 0

    while()....

    if($i % 3 === 0){
        echo '</div><div class="open-block">';
    }


    endwhile;

    echo '</div>';

---

这是在离子2上实现这一点的最快方法

模板：

<ion-grid>
  <ion-row *ngFor="let row of grid">
      <ion-col width-33 *ngFor="let image of row">
          <ion-img [src]="image.url">
       </ion-col>
  </ion-row>
</ion-grid>



组成部分：

  grid: Array; 

  loadGallery() {
     let rowsCount = Math.ceil(this.images.length / 3);
     grid = Array(rowsCount);

     for(let i = 0; i < rowsCount; i++) {
        grid[i] = this.getImages(i, 3);
     }
  }

  getImages(fromIndex:number, amount: number): Array {
    if ((fromIndex + amount) >= this.images.length)
       return this.image.slice(fromIndex, this.images.length - 1);
    return this.image.slice(fromIndex, amount);
  }

网格：数组；
loadGallery（）{
让rowsCount=Math.ceil（this.images.length/3）；
网格=数组（rowsCount）；
for（设i=0；i=this.images.length）
返回this.image.slice（fromIndex，this.images.length-1）；
返回this.image.slice（fromIndex，amount）；
}

填充
this.images
时，只需运行
loadGallery（）
函数即可（这只是用于放置图像的数组的一个别致名称）

我希望有帮助

来源：
出于好奇，你为什么需要这种东西？我想在应用程序库中显示成员的图片，以便他们可以点击删除它们。我使用的是Ionic 2Cheers，我曾经遇到过这个问题，但它并没有很好地融入到我现有的代码中，所以我使用了一种仅使用css的方法来使用flexbox。使用flexbox的解决方案是最好的，因为您不需要担心屏幕上适合的项目数量，但您的问题非常具体，您需要3个项目。