css - ionic 2 : Display array of items in a 3x3 table

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 列。

希望对你有帮助