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个类别即使您在最后一行中仍有2个单元格，最后一行只包含1个类别。

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>

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

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

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

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

添加一小部分ccs

.grid-categories {
    width: 40%;
    float: left;
    border: red solid;
}

这完全是我想要的。

* ng For Angular Ionic Grid population

更新

2 个答案: