Force reloading of ngFor list (from Firebase) when going back from another page


#1

In my web app I have a list that is filled with data from Firebase.
What I would like to do is to refresh this list whenever I add a new object to the database, without having to go back to the previous page and then go forward again.
Let me explain the structure:
Page 1 - Home Page -> Page 2 - Lists of Object (call it list1) + button for adding a new one -> Page 3 - List of objects that can be selected to be added the the previous list (call it list2).
What happens now is that, if I, on page 3, click on an object of the list2, this object is added to list1 correctly, but:

  • The list2 on page 3 is not refreshed (I have to go back to page 2 and then back to page 3 to see the effects)
  • The list1 on page 2 is not refreshed (I have to go back to page 1 and then back to page 2)

This is the html code for the lists (same for both of them):

 <ion-list>
    <ion-item *ngFor="let poi of poiList; let i = index" 
 (click)="openPage(poi, i)">
<h2> {{ poi.name }} </h2>
 </ion-item>
 </ion-list>

And this is the ts code that fills my list from firebase:

this.poiRef.orderByChild("cityName").equalTo(this.cityname).
on("child_added", function(snapshot) {
  var poif = snapshot.val(); 
   keys.push(snapshot.key);
    if (snapshot.child("cityName").val()== navParams.get('reference')
       .name){
      pois.push(poif);
    }
});
 this.poiList = pois;