与Cloud Firestore在Ionic中聊天

时间:2018-09-02 00:43:00

标签: firebase ionic-framework google-cloud-firestore

我正在尝试在我的应用中实现聊天页面。

在构造函数中,我要求数据库中的所有消息:

this._DB
        .getDocument("chats", this.favour.chatId)
        .then(documentSnapshot => {
          var chat = documentSnapshot.data();
          for (var key in chat) {
            chat.key = chat[key];
          }
          delete chat.key;
          this.chat = chat;
        })
        .catch(error => {
          console.log(error);
        });

该应用程序使用以下html加载好消息:

<ion-item *ngFor="let messages of chat?.messages" class="chat" text-wrap [ngClass]="{'chat-partner' : messages?.askedName == localStorage?.name}">
            {{messages.message}}
        </ion-item>

要实现实时聊天,我在文档中看到必须使用onSnapshot方法:

https://firebase.google.com/docs/firestore/query-data/listen

然后我使用此功能:

ionViewDidEnter() {
this._DB._DB
  .collection("chats")
  .doc(this.favour.chatId)
  .onSnapshot(function(doc) {
    this.chat = doc.data();
    console.log(this.chat);
  });
this.content.scrollToBottom();

}

但是问题是console.log在控制台中显示了this.chat,但是html不会刷新它:-(

我做错了什么?

预先感谢

PS:我看到使用on.shot函数时我可能会感到困惑。_DB._DB,这是因为在提供程序(_DB)中我没有该功能,并且我公开了可以在其他地方使用并可以进行测试。

1 个答案:

答案 0 :(得分:0)

最后我找到了解决方法。

问题出在这个对象上……与onSnapshot调用的函数中的对象不同。

我解决了创建其他函数的问题:

axios.put(url, imageFile, {
headers: {
'Content-Type': imageFile.type
});
  .then(function(response) {
   //Handle success.
});
  .catch(function (error) {
   //Handle errors.
});

将该对象接收到,然后从ionViewDidEnter()调用它

  observingChat(objectThis){
    if(objectThis.favour.chatId){
    this._DB._DB
      .collection("chats")
      .doc(objectThis.favour.chatId)
      .onSnapshot(function(doc) {
        objectThis.chat = doc.data();
        objectThis.content.scrollToBottom();
      });    
    } 
  }

我不知道这个对象为什么或在什么地方发生变化。...如果有人可以澄清并说出解决方案正确,我会非常恼火:-)