javascript - 将列表项数据从一页转移到另一页

Question

我正在使用 ionic 2 并尝试将数据从一页传输到另一页。更具体地说，第一页(quickSearch)上的一个列表项到另一页(quickSearchDetail)。我在下面有一张图片来证明这一点。

当我点击一个列表时，它应该将该数据传输到下一页，但是我遇到了一个问题，即无论我点击哪个项目，都只传输第一个列表项目(覆盖我的本地存储数据)。

快速搜索模板列表项

<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);
}

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');
}

Answer 1

处理起来太多了 :D 但是，您出错的地方是使用 getElementById 和 id.. and.. 东西。 ID是唯一的。并且使用 *ngFor 您正在创建更多具有相同 ID 的元素，这是不允许的。但浏览器会处理，并返回它找到的第一个具有该 ID 的元素，这解释了您所看到的行为。

另一点是 localStorage 的奇怪用法。这似乎不是您要尝试做的用例。我建议您查看 Angular 文档，特别是组件间通信。

简而言之，您可能应该创建一个保存数组列表的服务。然后在您的详细信息页面上创建一个导航参数，它将 ID 号保存到服务数组列表中的一个项目。在该页面上，您可以获得此 ID 并访问该服务以从项目中获取正确的数据。

我可以为您全部写下来，但这不是合适的网站，这会让我回到我之前提到的建议。查看 Angular 文档，了解应该如何创建主从结构，因为 getElementById、innerHtml 和 localStorage 不是可行的方法