[英]Transfer list item data from one page to another
我正在使用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);
}
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');
}
:D太难处理了,但是,您出问题的地方是使用getElementById
和id .. and ..东西。 ID是唯一的。 使用*ngFor
可以创建更多具有相同ID的元素,这是不允许的。 但是浏览器可以应付并返回使用该ID找到的第一个元素,该元素解释了您所看到的行为。
另一点是localStorage
的怪异用法。 这似乎不是您要尝试做的用例。 我建议您查看角度文档,尤其是组件间的通信。
简而言之,您可能应该创建一个包含数组列表的服务。 然后在您的详细信息页面上创建一个导航参数,该参数会将ID号保存在服务数组列表中的某个项目上。 在该页面上,您可以获取此ID并访问服务以从项目中获取正确的数据。
我可以为您编写所有内容,但这不是正确的网站,这会让我回到之前提到的建议。 查看有角度的文档,以了解如何创建主从结构,因为getElementById
, innerHtml
和localStorage
并非innerHtml
之路
尝试使用这个
//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查找值时,它始终会为您提供第一项。
您只需要使用navParams
。 您有一个非常认真的创意解决方案,但答案很简单。 对于我的答案,我将删除所有ID
,如果样式需要将其添加回去。 还要注意的一件事是,尽量不要用jquery的心态来接近angular,因为它们是2种不同的动物。
quickSearch模板列表项
<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的更多信息
在这里阅读更多有关navParams的信息
将所有数据添加到您的Click函数和.ts中
gotoQuickSearchDetail(data:any,datab:any.........){
navpushhere(SearchPage,{firstPassed:data,secondpassed:datab}); }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.