Not refreshing view on Firebase data change


#1

In an Ionic v3 app with Firebase database, I have a service file that handles getting data from Firebase. A sample function is like so…

getRecords(_filterfield, _value) 
  {
    let env = this;
    return new Promise(function(resolve, reject)
    { 
      firebase.database().ref('records').limitToLast(50).orderByChild(_filterfield).equalTo(_value).on('value',
        function(val)
        {
         (val.numChildren()>0) ? resolve(val.val()) : resolve({}); 
            });
        },
        function(){reject(Error);}
      )
    });
  }

Sample usage in other files…

// Within ionViewDidEnter(){}
this.theservice.getReports("userid","john123").then((reps)=>
    {
// populate an array with the reports. A list on the view is bound to this array
});

The code works fine. However, when I update the /reports/ node in Firebase, the view doesn’t reflect the change unless I navigate away from the view and return.
How can I cause it to update the view immediately the data changes? I tried using NgZone, but it didn’t work either. Could it have to do with the database call not being in the view’s .ts file?

Thanks.


#2

AngularFire2 is your friend.


#3

Thanks. I’ll check it out.