Общайтесь в Ionic с Cloud Firestore - PullRequest
Новая
       7

Общайтесь в Ionic с Cloud Firestore

0 голосов
/ 02 сентября 2018

Я пытаюсь реализовать страницу чата в своем приложении.

В конструкторе я прошу все сообщения в базе данных: 

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

}

Но проблема в том, что this.chat нормально показывается в консоли console.log, но html не обновляет его: - (

Я что-то не так делаю?

Заранее спасибо

PS: я вижу, может быть, это сбивает с толку в функции onSnapshot, которую я использую this._DB._DB, потому что в провайдере (_DB) у меня нет этой функции, и я делаю ее общедоступной, чтобы ее можно было использовать в другом месте. и может делать тесты.

1 Ответ

0 голосов
/ 03 сентября 2018

Наконец-то я нашел решение.

Похоже, проблема в том, что объект this ... отличается в компоненте, как в функции, вызываемой onSnapshot.

Я решил создать другую функцию: 

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

, который получает объект this и вызывает его из ionViewDidEnter () 

ionViewDidEnter() {
    this.content.scrollToBottom();
    this.observingChat(this);
  }

Я не знаю, почему или где объект этого изменения .... если кто-нибудь может уточнить и сказать мне, если решение верное, я буду очень благодарен: -)

...