On click function not showing the exact data

Question

I have one row with two columns as grid view to populate the date from the sevrver. By view everything is fine. But say i have 2 row with 4 column.like below :

a   b
c   d

So i have a click function on my row where selected item can see as detail view page.But the issues here is .For example if i select first grid cell in first row. that is ‘A’.Then in detail page its showing all the details about ‘A’

Same if i select ‘B’ then also in detail screen its showing as ‘A’ grid cell data only.Which is showing all the data about ‘A’.

Things i tried :

print the function of on click .if i select “A” then A is showing.If i select “B” then also on selected click function “A” Data only showing.

Here is my code :

<ion-grid no-padding>
      <ion-row no-padding *ngFor="let item of Data;let i=index" (click)="showDetails(item)">
      <ng-container *ngIf="i % 2 == 0">
        <ion-col col-6 col-sm-3 col-md-6 col-lg-4 col-xl-3 *ngIf="i < Data.length">
            <ion-card no-margin>          
              <div gallery-title>
              <h2 item-title text-wrap text-center>{{Data[i].ProductName}}</h2>
              </div>
            </ion-card>
          </ion-col>
          <ion-col col-6 col-sm-3 col-md-6 col-lg-4 col-xl-3 *ngIf="i+1  < Data.length">
            <ion-card no-margin>         
            <div gallery-title>
              <h2 item-title text-wrap text-center>{{Data[i+1].ProductName}}</h2>
              </div>
            </ion-card>
          </ion-col>
      </ng-container>
      </ion-row>
    </ion-grid>

Any help.I don't know what i am doing wrong here.

Thanks in advance !!

Answer 1

If I understand this right, it looks as though you're iterating over Data four times, but only actually outputting two rows from it (your *ngIf="i % 2 == 0" is causing you to lose access to two of your items.

So you're outputting the column for B on the first pass, in which case item is actually still item A.

Because of the way the Ionic columns work, you probably don't need to write it like this. Try the following:

<ion-grid no-padding>
  <ion-row no-padding>
    <ion-col col-6 col-sm-3 col-md-6 col-lg-4 col-xl-3 *ngFor="let item of Data" (click)="showDetails(item)">
        <ion-card no-margin>          
          <div gallery-title>
            <h2 item-title text-wrap text-center>{{ item.ProductName }}</h2>
          </div>
        </ion-card>
      </ion-col>
  </ion-row>
</ion-grid>

You're only going to have one row with this, but the columns should work out the way you want.

Answer 2

Its simple put the click in ion-col and that's it what you need is to pass the Data array with index in showDetails function

<ion-grid no-padding>
      <ion-row no-padding *ngFor="let item of Data;let i=index" (click)="showDetails(item)">
      <ng-container *ngIf="i % 2 == 0">
        <ion-col col-6 col-sm-3 col-md-6 col-lg-4 col-xl-3 *ngIf="i < Data.length" (click)="showDetails(Data[i])">
            <ion-card no-margin>          
              <div gallery-title>
              <h2 item-title text-wrap text-center>{{Data[i].ProductName}}</h2>
              </div>
            </ion-card>
          </ion-col>
          <ion-col col-6 col-sm-3 col-md-6 col-lg-4 col-xl-3 *ngIf="i+1  < Data.length" (click)="showDetails(Data[i+1])">
            <ion-card no-margin>         
            <div gallery-title>
              <h2 item-title text-wrap text-center>{{Data[i+1].ProductName}}</h2>
              </div>
            </ion-card>
          </ion-col>
      </ng-container>
      </ion-row>
    </ion-grid>

Answer 3

The click event you have bound is on the row not the column. I would suggest moving the click event to the <ion-col elements instead.