snapshotИзменяет не получать обновленные данные

Question

Я получаю последние 5 записей из коллекции chats на ngOnInit(), которая работает отлично. Теперь, когда я добавляю новую запись , я хочу, чтобы это появилось в списке. Чтобы добиться этого, я использовал .snapshotChanges(), но он не обновляет добавленную запись, как ожидалось.

home.ts

        ngOnInit() {
        //##fetch first 5 starts
        this.firestore.collection('chats' , ref => ref
    .limit(5) 
    .orderBy('entryDate', 'desc')
    )
    .snapshotChanges()
    .subscribe(response => {
    if(!response.length){
      console.log("no data available");
      return false;
    }
    this.firstInResponse = response[0].payload.doc;
    this.lastInResponse = response[response.length - 1].payload.doc;
    for(let item of response){
      var data = item.payload.doc.data();
      this.tableData.push(data);
    }

    }) //##fetch first 5 ends
}

home. html

  <ion-item>
    <ion-textarea placeholder="Type a comment..." [(ngModel)]="val1"></ion-textarea>
  </ion-item>

  <ion-button (click)="sendcomment()">
    <ion-icon size="small" slot="icon-only" name="add"></ion-icon>
    &nbsp;Post comment
  </ion-button>

  <ion-list>
    <ion-item *ngFor = "let item of tableData; let i = index;">
    <ion-label>{{item.message}}</ion-label>
    <ion-label>{{item.fromName}}</ion-label>
    <!-- <ion-label>{{item.chat_date}}</ion-label> -->
    </ion-item>
  </ion-list>

Снимок экрана home.html:

Редактировать 1

показывает console.log значения:

У меня есть сообщения от 1 до 22 * ​​1034 * в дБ, в 1-е время, когда страница загружается console.log показывает 0 до 4 5 entries - 18,19,20,21,22.

После добавления 23 в качестве новой записи в db сейчас console.log массив показывает 0 до 14 15 entries -

18,19,20,21,22 - это пришло на ngOnInit 19,20,21,22,23 19,20,21,22,23

Прикрепленный снимок экрана: