Image gallery in ionic2 not working

Ionic Framework ionic-v3
1

<ion-grid> <ion-row *ngFor="let item of gallerydata;let i = index"> <ion-col width-50> <ion-card> <img [src]="item[i].thumbpath"/></ion-card> </ion-col> <ion-col width-50> <ion-card> <img [src]="item[i+1].thumbpath"/></ion-card></ion-col> </ion-row> </ion-grid>

this is sample code same code works with ionic1 but not working with ionic2
Please suggest

2

Is it a sanitizing problem (you should have warning during execution time if so) ?
Any error ? Does it compile ? Do you just have a white screen during execution ?

3

White screen during execution

4

if i remove [i] and [i+1] this work fine . but the result which it will render is not my requirement

http://market.ionic.io/plugins/ionic-gallery . my requirement should be like this

5

You want to prompt images 2 by 2 ?
Isn’t it gallerydata[i] instead of item[i] ?
The [i+1] is weird, because at the last line it won’t work.

6

Thanks a lot .this works . i am trying to solve that last line by including ngif

7

Unable to solve that with Ngif .Do you have any solution for this?

8

Yes, i personnaly have a page with this :

<figure *ngFor="let c of categories.list;" (click)="categories.toggle(c)">
  <img class="font" *ngIf="c.active" src="assets/categories/active/{{c.picto}}" >
  <img class="font" *ngIf="!c.active" src="assets/categories/inactive/{{c.picto}}" >
  <figcaption [style.backgroundColor]="categories.cat[c].color">{{"CATEGORIES." + c | translate}}</figcaption>
</figure>

with something like that :

figure {
  position: relative;
  display: inline-block;
  margin: 2px;
  width: calc(50% - 8px);
}

All my picture are in shape of square, but you can take what you want from this code.
The idea is to display items one by one and not 2 by 2.