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

Posted 2023-03-13

【中文标题】在Ionic 2页面之间传递数据，传递的数据是未定义的

【英文标题】：Passing data between Ionic 2 pages, data passed is undefined

【发布时间】：2018-04-23 00:29:14

【问题描述】：

我正在使用 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 中将数据从一页传递到下一页？

【参考方案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);
        );
    );

【参考方案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
                
           
            )

        );

【讨论】：

这行得通，但每次通过 or 名称的新金额时，它都会重新加载新页面。如果我有 5 个名字，并且我 console.log('names') 每次传递数据时页面都会重新加载..关于如何解决这个问题的任何想法？

你需要什么样的行为？

我认为我需要的行为本质上是一个承诺。让服务器发回包含所有数据点的对象（通常在过去几周的不同日期）并将该对象传递给 NewPage，以便我可以呈现数据。 rn，每个数据点一次传递一个。

请查看更新