Wait for navParams.get to finish before loading page

Ionic Framework ionic-v3
1

Hey guys,

in my constructor I’m using:

this.result = this.navParams.get('result');

to receive some data from another page. My ionViewDidLoad() method looks like this:

ionViewDidLoad() { 
  this.init();
}

Within the init() method I’m about to access this.result.
However, I’m experiencing, that the init() method tries to use this.result before there is any data in it. When I do an console.log(Object.keys(this.result)) within init() it shows me an empty object. A few miliseconds later, the data is there.

How can I wait for the navParams.get method to be completed before calling the init() method?

Thank you!

2

I think it’s better to read this.result = this.navParams.get ('result'); on your constructor, because your page will be totally load. It’s the correct :
contructor(public navCtrl: NavController, public navParams: NavParams){ this.result = this.navParams.get ('result'); }

3

Hi Hugo.

As I said, I already do this in the constructor.

Thanks

4

And you do something like this.navCtrl.push(YourPage, { result: result.data }); on the first page? Try use

ionViewDidEnter(){
    this.init();
}

or setTimeout

ionViewDidLoad() { 
 setTimeout(() => {
        this.init();
        }, 300);
}
5

Or even try this

this.result.valueChanges.debounceTime(300).subscribe(
  this.init();
);
6

Yes, I properly pass the parameters to the page. When I add a timeout it’s working. This is why I reckon that navParams.get is still working.

7

The error in your original code arises because your page is not rendered yet.

8

Yes, I know. That’s why I opened this thread :wink: Do you have a solution for that?
It’s not an optimal approach to just add a manual timeout, from my point of view.

9

Something is going on here outside the scope of the code that has been posted. NavParams.get() is synchronous, and the constructor must be called before ionViewDidEnter() by definition. Are you certain that on the sending side (where the NavParams for this page are defined) that its result property is a normal object, and not reliant on a future of any sort?

11

I tried to use ionViewDidEnter() instead of ionViewDidLoad(). Strangely, this works as expected, and the init() method is called, when everything in the constructor is completed.

Thank you both, @HugoPetla and @rapropos.

However, I digged deeper into what you said:

I think this is the root of the problem. The this.result object is not built completely when I pass it to my page. I try to pass it to early. This is due to a complicated structure of nested loops and if statements and one asynchronous function call and it doesn’t really belong the the core question of this thread. Hence, I opened a new topic for that and I highly appreciate your help here, @rapropos and all others.

It can be found here: Identify when nested FOR loops and IF statement with one asynchronous function call are done

THANK YOU!

1 Like