Angular 2闯入新行

Question

我希望构建一个项目网格，每 3 次中断一次并拆分为另外 3 列的新行。我似乎无法找到一种使用 Ionic 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

嗯，这是在 ionic 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