Question

在我的离子应用程序中，我尝试将数组从php api返回的值传递给另一个页面，但未传递任何值

在user.html页面中，我有一个按钮，单击该按钮时会将值传递给下一页

<button ion-button icon-only (click)="goToResult()">
    <ion-icon ios="ios-log-out" md="md-log-out" class="user"></ion-icon> Next
</button>

userHome.ts

ngOnInit(){

this.phone = this.navParams.get('phone');


var headers = new Headers();

headers.append("Accept", 'application/json');

headers.append('Content-Type', 'application/json' );

let options = new RequestOptions({ headers: headers });

let data = {

    phone: this.phone

     };

let loader = this.loading.create({

content: 'Loading Page Contents',

});

loader.present().then(() => {

this.http.post('http://mypro.com/eApi/retrieve.php',data, options)

.map(res => res.json())

    .subscribe(res => {

     loader.dismiss()

    this.items=res.server_response;

    console.log(this.items);

    });

    });
    //this.navCtrl.push(PostPage, data); 
  }

在同一页面上，这是我尝试通过值传递的推送导航

goToResult(){
    console.log(this.items);
      this.navCtrl.push(PostPage,
        this.postList = this.items
      )

  }

在post.ts中，我将其添加到了构造器中

this.navParams.get(this.postList);

然后在我的 post.html

中

<ion-title *ngFor="let post of postList">{{post.Name}}
        </ion-title>

请问如何将api的返回值传递给另一页？

谢谢。

Answer 1

因此，如果您查看ionic doc示例，您将看到需要使用json对象传递数据并使用其键来检索数据，请尝试以下方法：

在您的第一个组件中：

   this.navCtrl.push(PostPage,
        { postList: this.items } 
   )

在接收组件构造函数中；

this.postList = this.navParams.get(“postList”);

如果仍在挣扎，请共享完整代码，但这应该很容易解决；）

Answer 2

你可以这样做

goToResult(){
    console.log(this.items);
      this.navCtrl.push(PostPage, {postList = this.items})
}

在post.ts中，您可以通过

获得价值

this.navParams.get('postList');

将返回值从php api数组传递到另一页

2 个答案: