点击功能不显示确切的数据 [英] On click function not showing the exact data

问题描述

我有一行两列作为网格视图来填充sevrver的日期。通过查看一切都很好。但是，假设我有2行4列，如下所示：

  ab 
cd 
  
 
 $ b 
所以我在我的行上有一个点击功能，其中选定的项目可以看作详细视图page.But这里的问题是。例如，如果我在第一行中选择第一个网格单元格。那就是'A'。然后在详细页面上显示'A'的所有细节。
 
 
 
同样，如果我选择'B'，那么也会详细显示'一个'grid cell data only。其中显示'A'的所有数据。
 
 
 
 我试过的东西： 
 
 
 
打印单击功能。如果我选​​择A，则A显示。如果我选​​择B，那么也选择单击功能A仅显示数据。
 
 
 
以下是我的代码： 
 
 
 < 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-grid> 
  
任何帮助，我不知道我在这里做错了什么。
 
 
 
在此先感谢!! 
解决方案
它需要的是在showDetails函数中传递带索引的Data数组。 
< ion-row no-padding * ngFor =let item of Data; let i = index（click）=showDetails（item）> 
< ng-container * ngIf =i％2 == 0> 
 < 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（数据第[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-grid> 
  

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

解决方案

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>

这篇关于点击功能不显示确切的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！