首页 文章

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

提问于
浏览
1

我正在使用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 回答

  • 0

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

    由于它是 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
                    }
               }
                })
    
            });
    

相关问题