Firestore：将 angularfire2 异步数据传递为 Ionic 3 navParams 不起作用

Posted 2023-02-19

【中文标题】Firestore：将 angularfire2 异步数据传递为 Ionic 3 navParams 不起作用

【英文标题】：Firestore: Passing angularfire2 async data as Ionic 3 navParams not working

【发布时间】：2018-05-12 04:00:05

【问题描述】：

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 仍然是 same Observable，正如我上面所说，除非数据库发生任何变化，否则您无法获取数据。只需编辑您的数据库，您就可以在控制台日志中看到国家/地区。 因此，解决方案只是在 2 页中使用 2 个不同的 Observable，方法是将 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 返回。

* 更新 *

在主页上删除国家/地区的显示，它可以正常工作。问题似乎是您不能多次订阅 Firestore observable。即它不会重新运行查询，它只会让您等待下一个永远不会出现的项目。

【讨论】：

再次测试并发现问题。删除主页上的国家/地区显示，它工作正常。问题似乎是您不能多次订阅 Firestore observable。即它不会重新运行查询，它只会让您等待下一个永远不会出现的项目。 （我会为未来的观众编辑我的回复。）

正确，这不是一个完整的解决方案，但它会为您指出故障点，让您找出解决方法并显然为您指明了正确的方向。它不需要是“正确”的答案，但我不确定你（或某人）为什么投反对票。我们走吧。 :)