Angular Ionic Grid使用*ngFor渲染分类布局问题求助

嘿，我明白你的问题啦！你现在的代码是每遍历一个分类就生成一行，而每行的两个列都用同一个分类数据，自然就会出现每行两个相同分类的情况。要实现每行两个不同分类、总共10行的布局，咱们可以从两种思路来改：

方法一：先把分类数组按两两一组分组 #

先在你的组件类里添加一个方法，把原有的categories数组转换成每两个元素一组的二维数组：

getCategoryPairs() {
  const pairs = [];
  for (let i = 0; i < this.categories.length; i += 2) {
    pairs.push(this.categories.slice(i, i + 2));
  }
  return pairs;
}

然后在模板里修改遍历逻辑，遍历分组后的数组，每行渲染一组里的两个分类：

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

这种方法逻辑清晰，把数据预处理好再渲染，可读性很高，后续维护起来也方便。

方法二：利用索引直接在模板中取对应元素 #

如果不想额外处理数组，也可以直接通过索引来控制，只在偶数索引时渲染行，然后在行内取当前索引和下一个索引的分类：

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

这里用*ngIf="i % 2 === 0"确保每两个分类才生成一个<ion-row>，同时加了*ngIf="categories[i + 1]"来处理分类数量为奇数的情况（防止数组越界），不过你这里是20个分类刚好偶数，这个判断可以保留也可以去掉，但留着能让代码更健壮。

内容的提问来源于stack exchange，提问作者mares