angular - 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 包含 country 信息作为 Observable 数据。因此，如果我将 city 作为 navParam 传递给另一个页面，只需 this.navCtrl.push(AnotherPage, {city: city})，我无法在 AnotherPage 上获取国家/地区信息。

我刚刚在此处添加了演示:https://stackblitz.com/edit/ionic-firestore .

欢迎任何想法。

Answer 1

原因是当你将city传递给ContactPage时，country Observable不会再发送数据。让我们详细看看。您的场景:

首先，您将cities 定义为Observable。当 cities 获取数据时，它会显示在模板中，您可以在点击函数中捕获 city 对象。请注意，city 是一个对象，而不是一个Observable，因此您可以直接同步 使用它。这就是 city.name 在两个页面中显示的原因。
其次，您将city.county 定义为Observable，然后通过async 绑定(bind)将其显示在模板中。在这一步，您正在订阅Observable，firebase 服务将向您发送您想要的数据，并且永远不会再次发送，除非您的数据库发生任何变化。< br/>
最后，您将city 对象发送到ContactPage。 city.country 仍然是相同的 Observable，正如我上面所说的，除非您的数据库发生任何变化，否则您无法获取数据。只需编辑您的数据库，您就可以在控制台日志中看到国家/地区。

因此，解决方案是通过再次将 city.country 设置为 firebase Observable，在 2 个页面中使用 2 个不同的 Observable。我猜你确实找到了它并在 ContactPage 中评论了它。
如果您有任何问题，请随时提出。