我有一个元素数组,我想在 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>
有没有办法在保持我的阵列展平的同时实现这种显示?
最佳答案
你不需要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 列。
希望对你有帮助
关于css - ionic 2 : Display array of items in a 3x3 table,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45821300/