Ionic + Firebase - Real time database not updating view

Question

I have a really weird problem with my application. In order for the real time database to display, I have to interact with the application. 2 months ago I did not have this problem, the information appeared normally, but now, I have to click on a button or something in order for the view to update.

I made a quick GIF here:

If you pause just as I click the <- back button you'll see what I mean.. https://i.gyazo.com/44b450aa502dc7f37e5a5feea19824c6.mp4

I don't know what I did to make this happen..

Here is a code example from my application:

.ts :

  if(fromClick) { this.subscription.off(); }
  this.postFeed = new Array();
  this.subscription = this.database.database.ref('/posts/'+this.locationId)
  .orderByChild('score')
  .limitToLast(10);
  this.subscription.on('child_added', (snapshot) => {
        this.postFeed.push(snapshot.val())
  });

.html :

  <ng-container *ngFor="let post of postFeed.reverse(); let i = index">
    <post [postData]="post"></post>
  </ng-container>

So this code above used to work perfectly, but now I have to interact with my app for it to display on the screen, even though the postFeed console logs perfectly fine. The data shows up in the console exactly when I request it, but it doesn't show on screen.

Any ideas? As I said, it used to work fine. Any help would be great! Thank you

Answer 1

For anyone else who has this problem, NgZone was the answer for me.

I imported it:

import { NgZone } from '@angular/core';

added it to the constructor:

public zone: NgZone,

and then wrapped it around my firebase code:

  this.zone = new NgZone({});
  if(fromClick) { this.subscription.off(); }
  this.postFeed = new Array();
  this.subscription = this.database.database.ref('/posts/'+this.locationId)
  .orderByChild('score')
  .limitToLast(10);
  this.subscription.on('child_added', (snapshot) => {
    this.zone.run(() => {
        this.postFeed.push(snapshot.val())
     }):
  });

and this worked wonderfully for me. I couldn't find the actual cause of the issue, but I just wrapped the NgZone code around all my firebase functions and it worked like it used to. If anyone else has more information that would be great.