在同一行的不同列中显示两个不同的索引答案

【问题标题】：Show two different index in same row different column在同一行的不同列中显示两个不同的索引
【发布时间】：2021-12-08 13:58:06
【问题描述】：

我有一个图像列表，它们来自一个包含 7 个元素的 json 数组：图像的关键是

 <ion-grid>
    <ion-row    *ngFor="let image of imageList; let i = index;">
      <ion-col>
           <div >
 
            <img  [src]="image.imageUrl"  />
         </div>      </ion-col>
      <ion-col>
          <div  >
            <img  [src]="image.imageUrl"  />
        
          </div>
      </ion-col>
    </ion-row>
 
    </ion-grid>

但是这段代码每行显示相同的图片，我尝试在第一列设置 image[i]，在第二列设置 image[i+1]，但没有。

我想像这样每行显示两个图像，但没有相同的图像。

谢谢。

【问题讨论】：

看起来类似于stackoverflow.com/questions/44007912/…
看起来但不是完全一样的问题。
相信我，它是一样的。我对块管道的回答应该可以解决您的任务
你到底想做什么？并排显示 2 张图片？如果是这样，为什么不直接在 ion-col 上设置 size=6 并只遍历 col 而不是行？
尝试imageList[i].imageUrl 和imageList[i+1].imageUrl 获取img src。

标签： html angular ionic-framework ngfor

【解决方案1】：

这样的事情应该可以工作：

<ion-grid>
 <ion-row    *ngFor="let image of imageList; let i = index;">
  <ion-col>
       <div >
        <img  [src]="imageList[i]?.imageUrl"  />
     </div>      </ion-col>
  <ion-col>
      <div  >
        <img  [src]="imageList[i + 1]?.imageUrl"  />
      </div>
  </ion-col>
</ion-row>

在 de *ngFor 循环中，image 将始终是每次迭代的一个图像。您应该迭代imageList 并使用索引来访问来自imageList 的图像。希望有意义

【讨论】：