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