Ionic框架ion-grid如何实现同一行不同列展示两张不同图片

问题原因 #

你当前的写法是对imageList数组做逐个遍历，每循环到1个图片就生成1行，所以同一行内的两列拿到的都是当前循环到的同一个图片对象。你之前尝试image[i]失效是因为循环变量image是单个图片对象，不是数组，需要从根数组imageList里取下标对应的元素。

解决方案1：直接在模板调整遍历逻辑（无需修改TS代码） #

直接按总行数循环，每行取当前下标对应的2个元素，同时兼容总数量为奇数的情况（比如你的7个元素，最后一行只会显示1张图）：

<ion-grid>
  <ion-row *ngFor="let rowIndex of Array.from({length: Math.ceil(imageList.length / 2)}).keys()">
    <ion-col>
      <div>
        <img [src]="imageList[rowIndex * 2].imageUrl" />
      </div>
    </ion-col>
    <ion-col *ngIf="rowIndex * 2 + 1 < imageList.length">
      <div>
        <img [src]="imageList[rowIndex * 2 + 1].imageUrl" />
      </div>
    </ion-col>
  </ion-row>
</ion-grid>

解决方案2：提前在TS中对数组分块（扩展性更好） #

如果后续可能调整每行展示的图片数量，建议先在TS文件里把数组按每行2个做分片：

// 对应页面的ts文件里加一个计算属性
get chunkedImageList() {
  const chunkSize = 2; // 要改每行数量只要改这个值即可
  const result = [];
  for (let i = 0; i < this.imageList.length; i += chunkSize) {
    result.push(this.imageList.slice(i, i + chunkSize));
  }
  return result;
}

模板里直接遍历分块后的数组即可：

<ion-grid>
  <ion-row *ngFor="let rowImages of chunkedImageList">
    <ion-col *ngFor="let image of rowImages">
      <div>
        <img [src]="image.imageUrl" />
      </div>
    </ion-col>
  </ion-row>
</ion-grid>

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