*ngFor Angular Ionic Grid 种群答案

【问题标题】：*ngFor Angular Ionic Grid population*ngFor Angular Ionic Grid 种群
【发布时间】：2018-10-16 12:46:56
【问题描述】：

我是开发新手。我正在尝试绘制一个包含 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 个单元格。

【问题讨论】：

你想要的结果是什么？单元格 x 行？您不能将 Angular for 增加 2，但可以将 ngFor 与 index 一起使用
您在两个单元格中都使用了 categorie.image，所以它肯定会显示相同的数据。
你需要重新映射你的categories 并将它分成两个，结果应该是[ [1,2], [1,2] ]
想解释一下吗？谢谢！
我无法正确理解。如果类别是 21 或任何奇数，那么您想显示一个列，您只需省略第二列？

标签： angular grid ionic3 ngfor

【解决方案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/

【讨论】：

【解决方案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;
}

这正是我想要的样子。

【讨论】：