Angular 4 异步数据存储

Question

我正在创建一个测试应用程序，它在 firebase 上托管了 1000 多个问题。为了防止多次下载问题，我实现了一个问题服务，在构造函数中我下载了问题：

this.db.list("questions/", { preserveSnapshot: true}).subscribe(snapshots => {...}

这会下载问题并将它们推送到问题数组中，这样我就不必在下一次会话之前重新下载。我还有一个服务问题的功能：

getQuestion(){
    return this.questions[0];
}

但是，由于 firebase 的异步特性，通常在调用 getQuestion() 之前尚未下载数据，因此 returns 未定义。

是否有适当的方法在 angular 中实现此数据存储类型模式，并确保构造函数中的异步调用在调用 getQuestion() 之前完成？

我尝试添加一个变量 ready，将其初始化为 false，并在异步调用 returns 时将其设置为 true。然后，getQuestions() 被修改为：

getQuestion(){
    while(!this.ready()){}
    return this.questions[0];
}

然而，这只会导致应用挂起。

Answer 1

几乎不需要使用 preserveSnapshot。不必担心快照是使用 AngularFire 的主要好处之一。只写this.db.list(PATH).subscribe(list =>。

您混淆了 "downloading" 和 "subscribing"。在服务内部订阅并在本地存储数据几乎不是一个好主意——正如您所发现的那样，您永远无法确定订阅处理程序何时具有运行。

相反，该服务应提供一个可观察对象，消费者（通常是组件）将使用该对象。这些消费者可以订阅 observable 并做任何他们想做的事情，包括静态存储数据，或者，最好是，您可以使用 async 管道直接在模板中订阅 observable。

一般规则是订阅越晚越好——最好是在模板中。将您的代码编写为一组您映射、过滤和组合的可观察对象。

Firebase 缓存结果，通常您无需担心自己缓存。

Answer 2

下载 FireBase 中的数据后调用 getQuestion() 函数。使用打击代码：

this.db.list("questions/").subscribe(list => {...} //etc

Angular 4 async data storage