Angular *角离子网格布居数的NGF算法

我不擅长发展。我试图画一行，有两个单元格，每个单元格包含一个类别

<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个单元格。

（代表问题作者发布解决方案）

多亏了评论，小组分成两个部分做了如下工作

    <ion-grid class="grid-categories">
    <ion-row *ngFor="let categorie of categories; let i = index" >
      <ion-col *ngIf="i % 2 == 0" >
        <img [src]="categorie.image" />
      </ion-col>
    </ion-row>
  </ion-grid>

  <ion-grid class="grid-categories">
    <ion-row *ngFor="let categorie of categories; let i = index" >
      <ion-col *ngIf="i % 2 != 0" >
        <img [src]="categorie.image" />
      </ion-col>
    </ion-row>
  </ion-grid>

---

这正是我想要的。

试试这段代码。这对我有用

<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列，您将获得所需的输出

---

您希望的结果是什么？单元格x行？您不能将Angular for增加2，但您可以在两个单元格中使用ngFor和您正在使用的Classifie.image索引，这样它肯定会显示相同的数据。您需要重新映射您的

类别

，并将其分为两组，结果应该是

[[1,2]，[1,2]

需要解释吗？谢谢我不能完全理解。如果categories是21或任何奇数，那么您想显示一个col，您只需省略第2个col？

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