离子2:显示3x3表中的项目数组

Question

我想要在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>

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

Answer 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列.

希望这可以帮助