将列表项数据从一页传输到另一页

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

快速搜索详情项

<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.. 和.. 的东西。 ID 是唯一的。并且使用*ngFor 您正在创建更多具有相同 ID 的元素，这是不允许的。但是浏览器会处理并返回它找到的第一个具有该 ID 的元素，这解释了您所看到的行为。

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

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

我可以为您编写所有内容，但这不是适合您的网站，这将使我回到我之前提到的建议。查看 Angular 文档，了解应该如何创建主从结构，因为 getElementById、innerHtml 和 localStorage 不是要走的路

Answer 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 查找值时，它总是给您第一项。

Answer 3

您只需要使用 navParams 。你有一个非常有创意的解决方案，但答案很简单。对于我的回答，我将删除所有 ID's ，如果您需要样式，请将它们添加回来。还有一件事要注意，尽量不要以 jquery 的心态接近 angular，因为它们是 2 种不同的动物。

快速搜索模板列表项

 <ion-item *ngFor="let item of items">
   <p>{{ item.clusterName }}</p>
   <p>{{ item.currentBUName }}</p>
   <p>{{ item.technology }}</p>
   <p>{{ item.Customer }}</p>
   <p>{{ item.clusterHeadNumber }}</p>
</ion-item>

所以在 *ngFor 中有你的列表包装器。您对item 的分配就是您所需要的。 item 包含您在下一页上想要的所有数据。这是你的“包裹”（如果你愿意的话）。现在您要做的就是将“包”传递到下一页。我们希望在点击时开始传递。

因此我们将它传递给(click) 事件。

(click)="gotoQuickSearchDetail(item)"

所以现在我们只需在 Component 文件中添加方法，然后借助 ionic 2 中的路由功能，我们只需将其发送到下一页即可。

gotoQuickSearchDetail(item){
    this.navCtrl.push(QuickSearchDetail, item);  //  Notice the 2nd parameter
}

第二个参数将项目传递到第一个参数中声明的页面。 所以现在你要去页面QuickSearchDetail，你正在传递你的“包裹”item。

现在，当您进入下一页时，您需要告诉该页面..“嘿，我有一个名为 item 的“包裹”，它有一些 data。

所以在你的QuickSearchDetail 组件中你可以添加这个。

import { NavController, NavParams } from 'ionic-angular';

@Component({
  selector: '...',
  templateUrl: '...html'
})
export class QuickSearchDetailPage {

    itemDetails: any;
    constructor(public navCtrl: NavController, public navParams: NavParams){
        this.itemDetails = this.navParams.data;

        // All the data is now held in the itemDetails variable.
        console.log(this.itemDetails);
    }
}

您现在已将保存单击的item 的数据的“包”分配给变量itemDetails，该变量已“传递”（默认情况下）到navParams.data。您现在可以在视图中使用itemDetails。

 {{ itemDetails.PROPERTYHERE }}

---

奖励：

当您使用终端生成页面时，您可以免费获得这些东西。

>_ ionic generate page QuickSearchDetail

navCtrl 还具有第三个属性，它具有动画选项。这很有趣。

this.navCtrl.push(QuickSearchDetail, item, { 
             animate: true, 
             direction: 'forward', 
             mode: 'ios'});

阅读更多关于navCtrl here
阅读更多关于navParams here

Answer 4

将所有数据添加到您的 Click 函数和 .ts 中

  gotoQuickSearchDetail(data:any,datab:any.........){

   navpushhere(SearchPage,{firstPassed:data,secondpassed:datab}); }