Question

我希望建立一个能够打破每一个第3个并且分成另一个3个cols的新行的项目网格。我似乎无法找到一种方法来直观地使用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>';

不幸的是，角度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);
  }

填写loadGallery()时，只需运行this.images函数（这只是放置图像的阵列的一个奇特名称）。

我希望它有所帮助。

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

Angular 2 Break into一个新的行

1 个答案: