时间戳

首页 > 解决方案 > 在同一行的不同列中显示两个不同的索引

html - 在同一行的不同列中显示两个不同的索引

问题描述

我有一个图像列表，它们来自一个包含 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>

但是这段代码向我展示了每行相同的图片，我试图在第一个 col 上设置 image[i]，在第二个 col 上设置 image[i+1]，但什么也没有。

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

谢谢。

标签： htmlangularionic-frameworkngfor

解决方案

像这样的东西应该工作：

<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。希望有意义

推荐阅读