首页 > 解决方案 > Angular Firebase 未获取实时结果,console.log 显示未定义

问题描述

我无法从 Cloud Firestore 获取实时数据。如果我执行 console.log 而不是在服务中返回并简单地调用该函数(不订阅它)它就可以工作。

这是我的 chatService 文件中的代码

    getRealTimeChats(): any {
    this.db.collection('chats').onSnapshot(querySnapshot => {
      const chat: ChatModel[] = [];
      querySnapshot.forEach(doc => {
        const data = doc.data() as ChatModel;
        chat.push(data);
      });
      return chat;
    });
}

以下是我的 chat.ts 文件中的代码

this.chatService.getRealTimeChats().subscribe((chats: ChatModel[]) => {
      this.chats = chats;
});

标签: angularfirebasegoogle-cloud-firestoreobservable

解决方案


onSnapshot 方法在加载数据时接收回调。你不能返回一个值,因为没有人会接受它。此外,您的 getRealTimeChats 不是可观察的,因此您无法订阅它。也许你可以返回一个自定义的 Observable。像这样的东西

getRealTimeChats(): any {
    const subject = new Subject();
    const observable = subject.asObservable();

    this.db.collection('chats').onSnapshot(querySnapshot => {
        const chat: ChatModel[] = [];
        querySnapshot.forEach(doc => {
            const data = doc.data() as ChatModel;
            chat.push(data);
        });
        subject.next(chat);
    });

    return observable;   
}

当你调用它时:

this.chatService.getRealTimeChats().subscribe((chats: ChatModel[]) => {
      this.chats = chats;
});

推荐阅读