在加载Ionic应用程序时显示Firebase中的数据 [英] Displaying data from Firebase on load of Ionic app
问题描述
我是Ionic和Firebase的初学者.要学习使用ionic + firebase，我正在编写RandomQuote应用程序以从Firebase提取随机条目.当我单击重新加载按钮时，将调用reload()方法，并按预期显示随机引用.
I'm a beginner in Ionic and Firebase. To learn using ionic+firebase, I'm writing a RandomQuote app to fetch a random entry from Firebase. A reload() method is called when I click a reload button, and the random quote is displayed as expected.
但是，我还希望报价在加载应用程序时显示，即在我单击重新加载"按钮之前.我在构造函数中调用了reload()方法，但是它不起作用.我试图在网络上搜索答案，但找不到我能理解的任何内容.不确定我是在搜索错误的关键字还是在错误的域中.
However, I also want the quote to display when the app is loaded, i.e., before I click the reload button. I call the reload() method in the constructor but it doesn't work. I have tried to search for answers on the web but cannot find anything that I could understand. Not sure if I'm searching the wrong keywords or in the wrong domains.
以下是我放入FirebaseProvider类并从home.ts调用的reload()方法:
The following is the reload() method that I put in my FirebaseProvider class and called from my home.ts:
reload(){
this.afd.list('/quoteList/').valueChanges().subscribe(
data => {
this.oneQuote = data[Math.floor(Math.random() * data.length)];
}
)
return this.oneQuote;
}
有人可以给我一些提示吗?或者，对于初学者有用的书籍/材料的任何指针也将受到高度赞赏.非常感谢.
Can anyone give me some hints? Or any pointer to useful books / materials for beginners will also be highly appreciated. Thank you very much.
推荐答案
数据是从Firebase异步加载的.这意味着，当您的 return 语句运行 this.oneQuote 时，还没有任何值.
Data is loaded from Firebase asynchronously. This means that by the time your return statement runs this.oneQuote doesn't have a value yet.
最简单的方法是在代码周围放置一些日志语句:
This is easiest to say by placing a few log statements around your code:
console.log("Before subscribing");
this.afd.list('/quoteList/').valueChanges().subscribe(
data => {
console.log("Got data");
}
)
console.log("After subscribing");
运行此代码时，输出为:
When you run this code, the output is:
订阅前
订阅后
获得数据
这可能不是您所期望的.但这完全解释了为什么您的 return 语句不返回数据:尚未加载数据.
This is probably not what you expected. But it completely explains why your return statement doesn't return the data: that data hasn't been loaded yet.
因此，您需要确保需要数据的代码在加载数据后运行.有两种常见的方法可以做到这一点:
So you need to make sure your code that needs the data runs after the data has been loaded. There are two common ways to do this:
-
通过将代码移到回调中
By moving the code into the callback
通过返回承诺/订阅/可观察
By returning a promise/subscription/observable
将代码移到回调中是最简单的:当 console.log("Got data")语句在上面的代码中运行时，保证数据可用.因此，如果将需要数据的代码移到该位置，则可以毫无问题地使用数据.
Moving the code into the callback is easiest: when the console.log("Got data") statement runs in the code above, the data is guaranteed to be available. So if you move the code that requires the data into that place, it can use the data without problems.
返回一个promise/subscription/observable有点难理解，但是更好的方法是做到这一点.现在，您无需将需要的数据移动到回调中，而将返回"something".退出在数据可用时公开数据的回调.对于AngularFire，最简单的方法是返回实际的可观察对象本身:
Returning a promise/subscription/observable is a slightly trickier to understand, but nicer way to doing the same. Now instead of moving the code-that-needs-data into the callback, you'll return "something" out of the callback that exposes the data when it is available. In the case of AngularFire the easiest way to do that is to return the actual observable itself:
return this.afd.list('/quoteList/').valueChanges();
现在需要引号的代码可以只订阅返回值并更新UI:
Now the code that needs the quotes can just subscribe to the return value and update the UI:
reload().subscribe(data => {
this.oneQuote = data[Math.floor(Math.random() * data.length)];
}
最后一点:使用 reload()方法听起来像是反模式.每当quoteList中的数据更改时，预订将已经被调用.无需为此调用 reload().
A final note: having a reload() method sounds like an antipattern. The subscription will already be called whenever the data in the quoteList changes. There is no need to call reload() for that.
这篇关于在加载Ionic应用程序时显示Firebase中的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
