使用 Angular 检索 firebase 实时数据答案

【问题标题】：Retrieving firebase real time data with Angular使用 Angular 检索 firebase 实时数据
【发布时间】：2020-04-14 15:44:31
【问题描述】：

我正在将数据存储在 Firebase 实时数据库中，我正在尝试获取存储的数据，但我似乎没有正确获取它 - 我需要任何帮助。

auth.service.ts:

 get_Data() {
  return firebase.database().ref('transfer/').on('value', (snapshot) => {
    this.transfer = snapshot.val();
     console.log('snapshot here',  this.transfer);
  })
 }

app.component.ts:

 dataList(){
       this.list = this.authService.get_Data();
       console.log('got you', this.list)
    }

返回undefined ...

【问题讨论】：

请在 React github.com/progamandoconro/Firebase-Real-Time-Web-Admin-App 中使用来自 Firebase 的实时数据检查我的 repo，这可能有助于解决问题。
太好了@programandoconro，我不太了解 React，但我在您的代码中看到了这一点 useEffect(() => { db().ref('/').on('value', handleReservas); db().ref('/').on('value', handleData) }, [userID]); 请与我的代码进行比较详细说明
很高兴它对您有所帮助。更详细，因为我在管理数据的状态，所以我可以通过 App 分享。
你安装了angularfire依赖吗？
是的@PeterHaddad 这太棒了，正是我想要的

标签： javascript angular firebase firebase-realtime-database

【解决方案1】：

尝试以下方法：

 get_Data() {
  return new Promise((resolve, reject) => {
     firebase.database().ref('transfer/').on('value', (snapshot) => {
     this.transfer = snapshot.val();
     resolve(snapshot.val());
     console.log('snapshot here',  this.transfer);
   });
  });
 }

然后在你的组件中，你可以这样做：

 dataList(){
       this.authService.get_Data().then((value) => {
       console.log(value);
        });
    }

【讨论】：