Question

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

当我点击列表时，它应该将该数据传输到下一页，但是我遇到的问题是，只有第一个列表项被传输，而不管我点击哪个项目（写过本地存储数据）。 / p>

快速搜索模板列表项

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

<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的奇怪用法。对于您正在尝试的内容，这似乎不是一个用例。我建议您查看角度文档，特别是组件间通信。

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

我可以为你写一切，但这不是正确的网站，这将使我回到我之前提到的建议。查看角度文档，了解如何创建主 - 详细信息结构，因为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查找值时，它始终会为您提供第1项。

Answer 3

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

快速搜索模板列表项

 <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保存您在下一页上想要的所有数据。这是你的＆＃34;包＆＃34; （如果你愿意的话）。现在你要做的就是通过＆＃34;包＆＃34;到下一页。我们希望在点击时开始传递。

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

(click)="gotoQuickSearchDetail(item)"

所以现在我们只需要在Component文件中添加方法，然后在离子2中使用路由功能，我们只需将其发送到下一页。

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

第二个参数将项目传递给第一个参数中声明的页面。所以现在你要进入页面QuickSearchDetail并且你正在传递你的＆＃34;包＆＃34; item一起骑行。

现在，当你到达下一页时，你需要告诉那个页面。＆＃34;嘿，我有＆＃34;包＆＃34;称为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);
    }
}

您现在已经分配了＆＃34;包＆＃34;将点击的item数据保存到变量itemDetails，该变量已通过＆＃34;＆＃34; （默认情况下）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}); }

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

4 个答案: