Question

我正在使用navParams将数据从一个页面传递到另一个页面。数据从我的服务器返回并且有效。但是，当我尝试将其传递到下一页时，当我在新页面中控制数据时，它是未定义的。

getDataFromServer(accId) {
  let headers = new Headers();
  headers.append('Content-Type', 'application/json');
  this.http.post('http://localhost:3000/data', {headers:headers})
    .map(res => res.json())
    .subscribe(data => {
        this.arr = data.accounts.filter((data) => {
          if(data.account_id === accId)
            return {
              amount: data.amount,
              name: data.name
            }
        })
        this.navCtrl.push(NewPage, {
          amount: this.arr.name,
          name: this.arr.name
        })
    });

}

export class NewPage {

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

  ionViewDidLoad() {
    console.log(this.navParams.get('amount'));
  }

}

金额记录为未定义。如果我传入一个字符串作为第二个参数，那么我可以在新页面中成功控制日志该字符串。我的数组是否被正确评估？和/或是否有更新的方法将数据从一个页面传递到Ionic2中的下一个页面？

Answer 1

由于它是async操作，您需要执行此操作，如下所示。

注意：概念就在那里。希望它是语法错误。

getDataFromServer(accId) {
  let headers = new Headers();
  headers.append('Content-Type', 'application/json');
  this.http.post('http://localhost:3000/data', {headers:headers})
    .map(res => res.json())
    .subscribe(data => {
        this.arr = data.accounts.filter((data) => {
          if(data.account_id === accId){
               this.navCtrl.push(NewPage, {
                   amount: data.amount,//you need to get the value here
                   name: data.name
               })
            return {
              amount: data.amount,
              name: data.name
            }
       }
        })

    });

}

<强>更新

您可以尝试如下所示。即使用first()运算符。它类似promise。

import 'rxjs/add/operator/first';

this.http.post('http://localhost:3000/data', {headers:headers})
        .map(res => res.json())
        .first()
        .subscribe(data => {
            this.arr = data.accounts.filter((data) => {
              if(data.account_id === accId){
                   this.navCtrl.push(NewPage, {
                       amount: data.amount,//you need to get the value here
                       name: data.name
                   })
                return {
                  amount: data.amount,
                  name: data.name
                }
           }
            })

        });

Answer 2

在完成filter并完成if条件后返回承诺怎么样。

getDataFromServer(accId) {
  var self = this;
  let headers = new Headers();
  headers.append('Content-Type', 'application/json');
  this.http.post('http://localhost:3000/data', {headers:headers})
    .map(res => res.json())
    .subscribe(data => {
        this.arrPromise = data.accounts.filter((data) => {
            return new Promise(function(fulfill, reject){
              if(data.account_id === accId){
                fulfill([data.amount, data.name]);
              }
              else{
                reject("error");
              }
            }
          });
        });
        this.arrPromise.then(function(result){
          console.log(result) //[data.amount, data.name]
          self.navCtrl.push(NewPage, {
            amount: result[0],
            name: result[1]
          })
        }).catch(function(reject){
          console.log(reject);
        });
    });
}

在Ionic 2页面之间传递数据，传递的数据未定义

2 个答案: