Html 点击功能不显示准确数据

我有一行两列作为网格视图，用于从服务器填充日期。从外表看，一切都很好。但假设我有2行4列。如下所示：

a   b
c   d

因此，我在我的行上有一个单击功能，在该功能中，所选项目可以作为详细视图页面查看。但这里的问题是。例如，如果我选择第一行中的第一个网格单元。这是“A”。然后在详细信息页面中显示“A”的所有详细信息

同样，如果我选择“B”，那么在详细屏幕中，它仅显示为“A”网格单元数据。这将显示有关“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-row>
    </ion-grid>

{{Data[i].ProductName}
{{Data[i+1].ProductName}

任何帮助。我不知道我做错了什么

---

提前谢谢

您绑定的单击事件位于行而不是列上。我建议将click事件移动到

您绑定的click事件位于行而不是列上。我建议将单击事件移动到
如果我理解正确，它看起来好像在对数据进行四次迭代，但实际上只从中输出两行（您的
*ngIf=“I%2==0”
会导致您失去对两个
项的访问权限

因此，您在第一次传递时输出B的列，在这种情况下，项实际上仍然是项A

由于离子柱的工作方式，您可能不需要这样编写。请尝试以下操作：

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


{{item.ProductName}

你只需要一行，但是列应该按照你想要的方式工作。
如果我理解正确，看起来你好像在对数据进行四次迭代，但实际上只从数据中输出两行（你的
*ngIf=“I%2==0”
导致你无法访问两个
项

因此，您在第一次传递时输出B的列，在这种情况下，项实际上仍然是项A

由于离子柱的工作方式，您可能不需要这样编写。请尝试以下操作：

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


{{item.ProductName}

您只需要一行，但是列应该按照您想要的方式工作。
它很简单，只需在ion col中单击，您需要的就是在showDetails函数中传递带有索引的数据数组

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


{{Data[i].ProductName}
{{Data[i+1].ProductName}
只需在ion col中单击，您需要的就是在showDetails函数中传递带有索引的数据数组

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


{{Data[i].ProductName}
{{Data[i+1].ProductName}
我想你忘了在这个问题上填空，但这里的问题是。我们几乎不知道你想要达到的是什么，如果我点击“A”，然后移动到“细节”页面，并显示“A”的数据。如果我点击“B”单元格，同样的时间，它也只显示“A”数据…不显示“B”。DATAI认为你忘了填写这个问题的空白，但这里的问题是。我们几乎不知道你想要达到的是什么，如果我点击“A”，然后移动到“细节”页面，并显示“A”的数据。如果我点击“B”单元格，同样的时间，它也只显示“A”数据…不显示“B”。数据但网格视图将如何出现。ur代码仅出现在右侧。不像网格视图那样一行加两行column@david这与您的代码完全相同：您创建了一行，并在其中添加了两列。您只是添加了一些您认为需要的逻辑，但事实并非如此。由于您定义列的方式，它们应该按照你想要的方式排列。从技术上讲，它们都在一行之内。如果你真的想要两行（公平地说，这在语义上是正确的）我们可以重新思考一下我的解决方案。@我理解你的逻辑，但我的帖子中的代码只有一行两列。我尝试用你的行两列。但没有成功that@lordchancellor你能帮我实现每行2列吗？正如我在帖子中解释的那样。但是网格视图如何你的代码只出现在右边，不像一行两行的网格视图column@david这与您的代码完全相同：您创建一行，并在其中添加两列。您只是添加了一些您认为需要的逻辑，但事实并非如此。由于您定义列的方式，它们应该按照您想要的方式进行布局。从技术上讲，它们都在一行之内。如果您真的想要两行（公平地说，这在语义上是正确的）我们可以重新思考一下我的解决方案。@我理解你的逻辑，但我的帖子中的代码只有一行两列。我尝试用你的行两列。但没有成功that@lordchancellor你能帮我达到每行2列吗？正如我在帖子中解释的那样厄尔