*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 个类别最后一行仅包含 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/