Firestore: передача асинхронных данных angularfire2 как Ionic 3 navParams не работает

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 включает country информацию как Observable. Поэтому, если я передаю city на другую страницу как navParam, просто this.navCtrl.push(AnotherPage, {city: city}), я не могу получить информацию о стране на AnotherPage.

Я только что добавил демо: https://stackblitz.com/edit/ionic-firestore.

Любые мысли приветствуются.

Ответ 1

Причина в том, что вы передаете city в ContactPage, country Observable больше не будет отправлять данные. Давайте посмотрим подробно. Ваш сценарий:

Сначала, вы определили cities как Observable. Когда данные cities получают данные, они отображаются в шаблоне, и вы ловите объект city в функции щелчка. Обратите внимание, что city является объектом, а не Observable, поэтому вы можете использовать его напрямую и синхронно. Именно поэтому city.name был показан на обеих страницах. Второй, вы определили city.county как Observable, тогда вы покажете его в шаблоне привязкой async. На этом этапе вы подписка Observable, и служба firebase отправит вам нужные вам данные и никогда не отправит их повторно, если в вашей базе данных не будет никаких изменений.

Наконец, вы отправляете объект city на ContactPage. city.country по-прежнему является одним и тем же Observable, и, как я сказал выше, вы не можете получить данные, если в вашей базе данных не будет никаких изменений. Просто отредактируйте свою базу данных, и вы можете увидеть страну в журнале консоли.

Таким образом, решение просто использует 2 разных Observable на 2 страницах, снова установив city.country в firebase Observable. Я думаю, вы его нашли и прокомментировали в ContactPage.
Если у вас есть какие-либо вопросы, не стесняйтесь спрашивать.

Ответ 2

Правильно ли настроена коллекция ваших стран? Когда я переместил

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

В событие onItemClick() он также никогда не возвращался из .subscribe.

* Обновление *

Удалите отображение страны на HomePage, и она отлично работает. Проблема заключается в том, что вы не можете подписаться на Firestore, наблюдаемый более одного раза. то есть он не перезапускает запрос, он просто оставляет вас в ожидании следующего элемента, который никогда не появляется.