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

我正在使用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中的下一个页面?

回答(2)

2 years ago

如何在 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);
        });
    });
}

2 years ago

由于它是 async 操作,您需要按如下所示进行操作 .

Note: 概念在那里 . 希望它作为语法错误 .

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

    });

}

Update

您可以尝试如下所示 . 即使用 first() operator.It就像 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
                }
           }
            })

        });