Show two different index in same row different column

Question

I have a list of image they come from an json array with 7 elements : The key of image is

 <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>

But this code show me the same pic per row , I have tried to set image[i] on the first col and image[i+1] on the second but nothing.

I want to show two image per row like this but without same image.

Thanks.

Looks similar to https://stackoverflow.com/questions/44007912/how-to-create-a-table-rows-with-an-array-in-angular — yurzui, Oct 21 '21 at 20:08
Trust me, it's the same. My answer with chunks pipe should solve your task — yurzui, Oct 21 '21 at 20:25
What are you exactly trying to do? Display 2 images next to each other? If that so, why not just set the `size=6` on the ion-col and just iterate over the col instead of the row? — Mohamed Karkotly, Oct 21 '21 at 21:15
try `imageList[i].imageUrl` and `imageList[i+1].imageUrl` for img src. — kian, Oct 22 '21 at 05:43

score 0 · Answer 1 · answered Oct 23 '21 at 16:00

Something like this should work:

<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>

Inside de *ngFor loop, the image will always be one image for every iteration. You should iterate the imageList and use the index to access the images from imageList. Hope it makes sense

Show two different index in same row different column

1 Answers1