Question

我对离子3很新，但基本上我想在点击按钮时推送新页面，然后将JSON数据显示给HTML。我想用ID标识每个按钮，因此它只显示与该id相关的数据。

例如 -

用户点击Button1 - ＆gt; Button1进入参考屏幕，显示仅与id 1相关的数据。

另一个按钮（按钮2），然后进入参考屏幕，显示仅与id 2相关的数据（依此类推等）

我的相关代码：

在我的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);
}

我已将REST API中的JSON数据存储到referenceList = []中。从阵列中我想显示描述，内容和图片。任何帮助将不胜感激！

Answer 1

goToReference(params)
{
    if (!params) params = {};
    this.navCtrl.push(ReferencePage);
}

在ReferencePage

获取数据时

let data = this.navParams.get("data");

Answer 2

我认为你需要这样做

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

希望它对你有用!!

Ionic 3推送带有Json数据的新页面

2 个答案: