首页 文章

Angular 2 Break into一个新的行

提问于
浏览
0

我希望 Build 一个项目网格,每隔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 . 有没有人有任何解决这个问题的巧妙伎俩?

1 回答

  • 0

    那么这是在离子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

相关问题