javascript - 将列表项数据从一个页面传输到另一个页面

我正在使用 Ionic 2，并且试图将数据从一个页面传到另一个页面。更具体地说，是将第一个页面（quickSearch）上的一个列表项传到另一个页面（quickSearchDetail）。我下面有一张图片来演示这一点。

当我点击一个列表时，它应该将该数据传送到下一页，然而我遇到了一个问题，无论我点击哪个项目，只有第一个列表项会被传送（覆盖了我的本地存储数据）。

quickSearch 模板列表项

<ion-item *ngFor="let item of items" (click)="gotoQuickSearchDetail(item._id)">
  <p id="clusterNameFormValue">{{ item.clusterName }}</p>
  <p id="currentBUNameFormValue">{{ item.currentBUName }}</p>
  <p id="technologyFormValue">{{ item.technology }}</p>
  <p id="customerFormValue">{{ item.Customer }}</p>
  <p id="clusterHeadNumberFormValue">{{ item.clusterHeadNumber }}</p>
</ion-item>

quickSearch.ts

gotoQuickSearchDetail(){
  var clusterName: any = clusterName = document.getElementById("clusterNameFormValue").innerHTML;
  var currentBUName: any = currentBUName = document.getElementById("currentBUNameFormValue").innerHTML;
  var technology: any = technology = document.getElementById("technologyFormValue").innerHTML;
  var customer: any = customer = document.getElementById("customerFormValue").innerHTML;
  var clusterHeadNumber: any = clusterHeadNumber = document.getElementById("clusterHeadNumberFormValue").innerHTML;

  localStorage.setItem('clustername', clusterName);
  localStorage.setItem('currentBUName', currentBUName);
  localStorage.setItem('technology', technology);
  localStorage.setItem('customer', customer);
  localStorage.setItem('clusterHeadNumber', clusterHeadNumber);

  this.navCtrl.setRoot(QuickSearchDetail);
}

快速搜索详情项

<ion-list>
    <ion-item>
      <p id="clusternameDetail"></p>
      <p id="currentBUNameDetail"></p>
      <p id="technologyDetail"></p>
      <p id="customerDetail"></p>
      <p id="clusterHeadNumberDetail"></p>
   </ion-item>
</ion-list>

quickSearchDetail.ts

ionViewDidLoad() {
    document.getElementById('clusternameDetail').innerHTML = localStorage.getItem('clustername');
    document.getElementById('currentBUNameDetail').innerHTML = localStorage.getItem('currentBUName');
    document.getElementById('technologyDetail').innerHTML = localStorage.getItem('technology');
    document.getElementById('customerDetail').innerHTML = localStorage.getItem('customer');
    document.getElementById('clusterHeadNumberDetail').innerHTML = localStorage.getItem('clusterHeadNumber');
}

答案＃1

这太难处理了 :D 但是，你出错的地方是使用了 getElementById 和 id……还有一些其他东西。ID 是唯一的。而使用 *ngFor 时，你会创建更多具有相同 ID 的元素，这是不允许的。但浏览器能够应付，会返回它找到的第一个具有该 ID 的元素，这就解释了你看到的行为。

另一个问题是对 localStorage 的奇怪使用。这似乎不是你想要做的事情的合适用例。我建议你查看 Angular 文档，尤其是关于组件间通信的部分。

总之，你可能应该创建一个服务，用来保存数组列表。然后在你的详情页面上创建一个导航参数，用来保存数组列表中某个项目的ID。在该页面上，你可以获取这个ID，并访问服务以从项目中获取正确的数据。

我可以为你写出所有内容，但这里不是合适的地方，这会让我回到之前提到的建议。查看 Angular 文档，了解你应该如何创建主从结构，因为 getElementById、innerHtml 和 localStorage 并不是正确的方式

答案＃2

尝试使用这个

//quickSearch Template list item 
<ion-item *ngFor="let item of items" (click)="gotoQuickSearchDetail(item)">
  <p id="clusterNameFormValue">{{ item.clusterName }}</p>
  <p id="currentBUNameFormValue">{{ item.currentBUName }}</p>
  <p id="technologyFormValue">{{ item.technology }}</p>
  <p id="customerFormValue">{{ item.Customer }}</p>
  <p id="clusterHeadNumberFormValue">{{ item.clusterHeadNumber }}</p>
</ion-item>


//quickSearch.ts
gotoQuickSearchDetail(item: any){
  var clusterName: any = clusterName = item.currentBUName;
  var currentBUName: any = currentBUName = item.currentBUName;
  var technology: any = technology = item.technology;
  var customer: any = customer = item.Customer;
  var clusterHeadNumber: any = clusterHeadNumber = item.clusterHeadNumber;

  localStorage.setItem('clustername', clusterName);
  localStorage.setItem('currentBUName', currentBUName);
  localStorage.setItem('technology', technology);
  localStorage.setItem('customer', customer);
  localStorage.setItem('clusterHeadNumber', clusterHeadNumber);

  this.navCtrl.setRoot(QuickSearchDetail);

你对项目有循环。在这种情况下，每个项目都包含相同的 ID。因此，当你尝试通过元素 ID 查找值时，它总是给你第一个项目。