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列所有屏幕尺寸。

希望这有帮助

Answer 2

使用Flexbox显示结果，如：

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

仅使用一个*ngFor来获取单个数组;

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

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

3 个答案: