Ionic 3推送带有Json数据的新页面-Java 学习之路

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

例如 -

用户单击Button1 - > 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 = []中 . 从数组我想显示描述，内容和图片 . 任何帮助将不胜感激！

2 回答

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

在ReferencePage获取数据

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

回复于 2024-05-06T05:00:00+08: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);
}

希望这对你有用！！

回复于 2024-05-06T05:00:00+08:00

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

2 回答

相关问题