Angular Firebase 未获取实时结果，console.log 显示未定义

Question

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

这是我的聊天服务文件中的代码

    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;
});

Answer 1

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;
});