Firestore: Passing angularfire2 async data as Ionic 3 navParams not working

Question

cities: Observable<any>;


this.cities = this.fsProvider.collection('cities').map(cities => {
    return cities.map(city => {
      city.country = this.fsProvider.doc(`countries/${city.country_id}`);
      return city;
    });
});

city includes country info as Observable data. So if I pass city to another page as a navParam, just this.navCtrl.push(AnotherPage, {city: city}), I can't get country info on the AnotherPage.

I just added the demo here: https://stackblitz.com/edit/ionic-firestore.

Any thoughts are welcome.

Answer 1

The reason is when you pass the city to ContactPage, the country Observable will not send data again. Let's see in detail. Your scenario:

First, you defined cities as an Observable. When the cities get data, it is shown in the template and you catch the city object in click function. Note that city is a object, not an Observable so you can use it directly and synchronously. It is why the city.name was shown in both pages.

Second, you defined city.county as an Observable then you show it in the template by async binding. At this step, you are subscribing the Observable and the firebase service will send you the data you want and will never send it again unless there is any change in your database.

Finally, you send the city object to ContactPage. The city.country is still the same Observable and as I say above, you can not get the data unless there is any change in your database. Just edit your database and you can see the country in console log.

So, the solution is just using 2 different Observable in 2 pages by setting the city.country to the firebase Observable again. I guess you actually found it and comment it in ContactPage.
If you have any question, feel free to ask.