ionic 2:在3x3表格中显示项目数组 [英] ionic 2: Display array of items in a 3x3 table

问题描述

我有一个要在3x3表格中显示的项目数组，如下所示:

I have an array of items I would like to display in a 3x3 table like display as follows:

为了实现这一目标，我将数组切成3个数组(每个数组3个)，并显示如下:

In order to achieve that, I sliced my array into 3 arrays of 3 and displayed it as follows:

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

有没有办法在保持阵列平坦的同时实现此显示?

Is there a way to achieve this display while keeping my array flattened?

推荐答案

您不需要3个数组，只需要了解有关网格系统的更多信息即可. 这是一个12列的行，因此，如果要传递12列，则会将项目下推并创建"另一行，因此只需一个数组即可

You don't need 3 arrays, just need to understand more about the grid system. It's a 12 columns row, so if it's going to pass 12 columns it pushes the item down and "create" another row, so with a single array do

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

So the col-4 will specify to your grid that this tag will take up to 4 columns of the 12 for all screens size.

希望这会有所帮助

这篇关于ionic 2:在3x3表格中显示项目数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！