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

Question

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

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

在filter 完成并且满足if 条件之后返回一个promise。

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

Answer 2

既然是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
                }
           }
            })

        });