在加载 Ionic 应用程序时显示来自 Firebase 的数据

Question

我是 Ionic 和 Firebase 的初学者。为了学习使用 ionic+firebase，我正在编写一个 RandomQuote 应用程序来从 Firebase 中获取一个随机条目。当我点击一个重新加载按钮时，调用了一个 reload() 方法，随机引用按预期显示。

但是，我还希望在加载应用程序时显示报价，即在我单击重新加载按钮之前。我在构造函数中调用了 reload() 方法，但它不起作用。我试图在网上搜索答案，但找不到任何我能理解的东西。不确定我是否搜索了错误的关键字或在错误的域中。

以下是我放入 FirebaseProvider 类并从 home.ts 调用的 reload() 方法：

reload(){
    this.afd.list('/quoteList/').valueChanges().subscribe(
      data => {
        this.oneQuote = data[Math.floor(Math.random() * data.length)];
      }
    )
    return this.oneQuote;
}

谁能给我一些提示？或者任何指向初学者有用的书籍/材料的指针也将受到高度赞赏。非常感谢。

Answer 1

数据是从 Firebase 异步加载的。这意味着当您的 return 语句运行时，this.oneQuote 还没有值。

通过在您的代码周围放置一些日志语句最容易说：

console.log("Before subscribing");
this.afd.list('/quoteList/').valueChanges().subscribe(
  data => {
    console.log("Got data");
  }
)
console.log("After subscribing");

当你运行这段代码时，输​​出是：

订阅前

订阅后

得到数据

这可能不是您所期望的。但它完全解释了为什么您的 return 语句没有返回数据：该数据尚未加载。

因此，您需要确保需要数据的代码在数据加载后运行。有两种常见的方法可以做到这一点：

1. 通过将代码移动到回调中

2. 通过返回一个承诺/订阅/可观察

将代码移动到回调中是最简单的：当console.log("Got data")语句在上面的代码中运行时，可以保证数据可用。所以如果你把需要数据的代码移到那个地方，它就可以毫无问题地使用数据。

返回一个 promise/subscription/observable 有点难以理解，但是更好的方式来做同样的事情。现在，不是将需要数据的代码移动到回调中，而是从回调中返回“某物”，以便在数据可用时公开数据。在 AngularFire 的情况下，最简单的方法是返回实际的 observable 本身：

return this.afd.list('/quoteList/').valueChanges();

现在需要引号的代码可以订阅返回值并更新 UI：

reload().subscribe(data => {
  this.oneQuote = data[Math.floor(Math.random() * data.length)];
}

最后一点：reload() 方法听起来像是一种反模式。只要quoteList 中的数据发生变化，就会调用订阅。无需为此致电reload()。