Angular 2闯入新行

Question

我希望建立一个每三个折断的物品网格，然后将3个Cols的新行分成一行。我似乎无法找到一种用离子2进行直观地完成此操作的方法/Angular 2。

在PHP中，我将使用以下内容解决此问题

    <?php 

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

    endwhile;
    echo '</div>';

不幸的是，Angular 2不允许我进行NGIF以关闭DIV。有人有任何整洁的技巧来解决这个问题吗？

Answer 1

这是在离子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);
  }

填充this.images时只需运行loadGallery()函数（这只是将图像放置的数组的奇特名称）。

我希望它有帮助。

来源：http：//blog.ionic.io/layout-the-cool-way-using-the-ionic-2-grid-component