angular - *ngFor Angular Ionic Grid 种群

Question

我是开发新手。我正在尝试绘制一个包含 2 个单元格的行，每个单元格都包含一个类别

<ion-grid>
<ion-row *ngFor="let categorie of categories">
  <ion-col>
    <img [src]="categorie.image" />
  </ion-col>
  <ion-col>
    <img [src]="categorie.image" />
  </ion-col>
</ion-row>

我得到的结果很明显，两个单元格中的类别相同。我有大约 20 个类别，所以应该有 10 行，20 个单元格。

更新

Abdelrhman Hussien，根据您的评论，希望的结果将根据我的情况:

类别数量:21 个或更多

结果:11行每行包含 2 个类别last Row 仅包含 1 个类别，即使您认为最后一行仍有 2 个单元格。

Answer 1

试试这个代码。它对我有用。

<ion-grid>
            <ion-row no-padding>
              <ion-col col-6 *ngFor="let categorie of categories">
                      <img [src] ="categorie.image" />
              </ion-col>
            </ion-row>
</ion-grid>

ionic 中的网格由 12 列组成。因此，如果您的图像占用 6 列，您将获得所需的输出。

https://ionicframework.com/docs/v3/components/#grid

https://ionicframework.com/docs/v3/api/components/grid/Grid/