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

我正在使用离子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>

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>

---

这太多了，无法处理：D但是，出现错误的地方是使用

getElementById

，以及id。。和。。东西ID是唯一的。使用

*ngFor

您将创建更多具有相同ID的元素，这是不允许的。但是浏览器会处理，并返回它找到的第一个ID元素，这解释了您看到的行为

另一点是

localStorage

的奇怪用法。这看起来不像是您正在尝试做的事情的用例。我建议您查看angular文档，特别是组件间通信

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

我可以为你写这一切，但这不是合适的网站，这将使我回到我前面提到的建议。查看angular文档，了解应该如何创建主详细结构，因为

getElementById

，

innerHtml

和

localStorage

不是使用此方法的方法

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

//快速搜索模板列表项
{{item.clusterName}
{{item.currentBUName}
{{item.technology}
{{item.Customer}
{{item.clusterHeadNumber}
//快速搜索
gotoQuickSearchDetail（项目：任何）{
var clusterName:any=clusterName=item.currentBUName；
var currentBUName:any=currentBUName=item.currentBUName；
var-technology:any=technology=item.technology；
var客户：任意=客户=物料。客户；
变量clusterHeadNumber:any=clusterHeadNumber=item.clusterHeadNumber；
setItem（'clustername'，clustername）；
setItem（'currentBUName'，currentBUName）；
setItem（'technology'，technology）；
localStorage.setItem（'customer'，customer）；
setItem（'clusterHeadNumber'，clusterHeadNumber）；
this.navCtrl.setRoot（QuickSearchDetail）；

---

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

您只需要使用

navParams

。您有一个非常有创意的解决方案，但答案非常简单。对于我的答案，我将删除所有

id

，如果你需要的话，把它们加回去。还有一点需要注意的是，尽量不要用jquery的思维来接近angular，因为它们是两种不同的动物

快速搜索模板列表项

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

现在我们只需要在我们的组件文件中添加这个方法，然后利用ionic 2中的路由功能，我们就可以将它发送到下一页

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

第二个参数将项目传递到第一个参数中声明的页面。 因此，现在您将进入页面

QuickSearchDetail

，并将您的“包”

项目

传递给乘客

现在，当您进入下一页时，您需要告诉该页..“嘿，我有一个名为

项目

的“包”，其中包含一些

数据

因此，您可以在

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

现在，您已将保存单击的

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

 {{ itemDetails.PROPERTYHERE }}


奖金：

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

>_ ionic generate page QuickSearchDetail

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

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

阅读更多关于

阅读更多关于
将所有数据添加到单击功能和.ts中

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

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

啊，是的，这太完美了，非常感谢@Math10。非常感谢。祝你过得愉快。谢谢gerdi，这更有效，我也会试试
>_ ionic generate page QuickSearchDetail

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

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

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