动态加载图像库离子网格的行和列答案

【问题标题】：dynamically load row and column of an image gallery ionic grid动态加载图像库离子网格的行和列
【发布时间】：2018-01-17 02:53:12
【问题描述】：

我有一个包含 20 个图像的图像数组。我想以虚拟滚动网格形式动态加载我的图像，每行有 4 列，但不知道如何完成它

这是我当前的代码

<ion-content>
    <ion-grid [virtualScroll]="photo_library">
      <ion-row *virtualItem="let photo" ng-if="$index % 4 === 0">
        <ion-col>
            <ion-img [src]="photo.avatarUrl"></ion-img>
        </ion-col>
      </ion-row>
    </ion-grid>
  </ion-content>

但这会生成一行和 1 列，但我希望动态地在 1 行中有 4 列。我如何做到这一点？

【问题讨论】：

标签： ionic-framework ionic3 virtualscroll ion-grid

【解决方案1】：

<ion-content>
    <ion-grid >
      <ion-row [virtualScroll]="photo_library" >
        <ion-col col-6 col-md-4 col-xl-3 *virtualItem="let photo ">
            <ion-img [src]="photo.avatarUrl"></ion-img>
        </ion-col>
      </ion-row>
    </ion-grid>
  </ion-content>

【讨论】：