15
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.

coturiv
  • 2,880
  • 22
  • 39

2 Answers2

2

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.

trungk18
  • 19,744
  • 8
  • 48
  • 83
Duannx
  • 7,501
  • 1
  • 26
  • 59
0

Is your Countries collection setup correctly? When I moved the 

if (this.city) {
      this.city.country.subscribe((country) => {
        console.log(country);
      }, () => {
        console.log('finished');
      }, (error) => {
        console.log(error);
      });
    }

Into the onItemClick() event, it also never returned from the .subscribe.

* Update *

Remove the display of the country on HomePage and it works fine. The problem seems to be that you can't subscribe to the Firestore observable more than once. i.e. it doesn't re-run the query it just leaves you waiting for the next item which never comes.

joelm
  • 8,741
  • 1
  • 19
  • 17
  • One more test and uncovered the problem. Remove the display of the country on HomePage and it works fine. The problem seems to be that you can't subscribe to the Firestore observable more than once. i.e. it doesn't re-run the query it just leaves you waiting for the next item which never comes. (I'll edit my response just for future viewers.) – joelm Nov 28 '17 at 22:56
  • Correct, it's not a complete solution, but it points you to the point of failure which lets you figure out the workarounds and apparently pointed you in the right direction. It doesn't need to be the 'correct' answer, but I'm not sure why you (or someone) down voted it. on we go. :) – joelm Nov 29 '17 at 15:29