ionic 2：在 3x3 表中显示项目数组答案

【问题标题】：ionic 2: Display array of items in a 3x3 tableionic 2：在 3x3 表中显示项目数组
【发布时间】：2017-08-22 15:08:27
【问题描述】：

我想在 3x3 表格中显示一组项目，如下所示：

为了实现这一点，我将我的数组分成 3 个数组，每组 3 个，并显示如下：

<ion-grid no-padding class="home-gallery">
    <ion-row *ngFor="let row of items | async">
        <ion-col *ngFor="let item of row">
            <div class="products_list">
                <div class="products_list_img">
                    <img [src]="item.previewImage" (click)="showItem($event, item)"/>
                </div>    
            </div>
        </ion-col>
    </ion-row>
</ion-grid>

有没有办法在保持阵列展平的同时实现这种显示？

【问题讨论】：

我认为您应该使用 Flexbox 来显示结果，请参阅下面的答案。
keeping my array flattened 你能解释一下吗，我猜你不想有两个 for 循环去获取对象，是这样吗？

标签： css angular ionic-framework ionic2

【解决方案1】：

你不需要3个数组，只需要了解更多关于网格系统的知识。这是一个 12 列的行，所以如果它要传递 12 列，它会将项目向下推并“创建”另一行，所以使用单个数组就可以了

<ion-grid no-padding class="home-gallery">
    <ion-row>
        <ion-col col-4 *ngFor="let item of items | async"> <!-- JUST ADD A col-4 attribute -->
            <div class="products_list">
                <div class="products_list_img">
                    <img [src]="item.previewImage" (click)="showItem($event, item)"/>
                </div>    
            </div>
        </ion-col>
    </ion-row>
</ion-grid>

因此col-4 将向您的网格指定此标签将占用所有屏幕尺寸的 12 列中的 4 列。

希望对你有帮助

【讨论】：

这绝对是使用 Ionic 实现所需布局的最佳方式

【解决方案2】：

使用Flexbox 显示如下结果：

.home-gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

并且只使用一个*ngFor 来获取您的单个数组；

【讨论】：

【解决方案3】：

通常，在模板中这样做是个坏主意，因为模板变得太复杂且难以阅读：

<ion-grid no-padding class="home-gallery">
    <ion-row *ngFor="let rowN of [0,1,2]">
      <ng-container *ngFor="let colN of [0,1,2]">
        <ion-col *ngFor="let item of (flatList | async).slice(rowN*3+colN, rowN*3+colN+1)">
            <div class="products_list">
                <div class="products_list_img">
                    <img [src]="item.previewImage" (click)="showItem($event, item)"/>
                </div>
            </div>
        </ion-col>
      </ng-container>
    </ion-row>
</ion-grid>

【讨论】：

谢谢，但这似乎太复杂了