Ionic 3使用Json数据推送新页面
Ionic 3使用Json数据推送新页面
提问于 2017-11-06 08:08:33
我对ionic 3相当陌生，但本质上，我希望在单击按钮时推送一个新页面，然后将JSON数据显示到HTML。我想用一个id来标识每个按钮，这样它将只显示与该id相关的数据。
例如：
用户单击Button1 -> Button1转到reference屏幕，该屏幕显示仅与id 1相关的数据。
另一个按钮(button2)，然后转到参考屏幕，显示只与id2相关的数据(依此类推)
我的代码涉及到：
在levels.html文件中
<button id="levels-button5" on-click="goToReference()">
<ion-icon name="button1"></ion-icon>
Button 1
</button>在levels.ts文件中
goToReference(params){
if (!params) params = {};
this.navCtrl.push(ReferencePage);
}
referenceList = [];
//Calling the data from the API and storing it in referenceList[]
getReferences() {
this.servicesProvider.getReferences().subscribe(data => this.referenceList = data);
}我已经将JSON数据从REST API存储到referenceList =[]中。从数组中，我想显示描述、内容和图片。任何帮助都将不胜感激！
回答 2
Stack Overflow用户
发布于 2017-11-06 13:00:35
goToReference(params)
{
if (!params) params = {};
this.navCtrl.push(ReferencePage);
}在ReferencePage中获取数据时
let data = this.navParams.get("data");Stack Overflow用户
发布于 2017-11-07 14:48:00
我认为你需要这样做
<ion-list no-lines>
<ion-item *ngFor="let item of referenceList; let i = index;">
<button id="levels-button5" (click)="goToReference(i)">
<ion-icon name="button1"></ion-icon>
Button 1
</button>
</ion-item>
</ion-list>在.ts文件中
getReferences(idx:number) {
// here you can access your list data by index
// when button is pressed the index of that perticular button is accessible here
// and from that you pass the data as per your need
this.servicesProvider.getReferences().subscribe(data => this.referenceList = data);
}希望它能为你工作！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47127999
复制相关文章
相似问题
腾讯云开发者
