Reload data in a component Ionic

Question

I'm using Ionic and Firestore for my web appllication. In a component I show a list of items from firestore database,the detail of an item in url tabs/items/list-detail/ and other button to modify images, then there is a button to return the url tabs/items/. Afterwards, if I return to the tabs/items/list-detail page I would like the list to be reloaded with the modified items, but the page remains the same.

I have tried using ViewWillEnter but doesn't work.

In html page of items there is a button to navigate to detail page:

<ion-button id="detail" *ngIf="registeredAndUpl?.registered!=true" [routerLink]="['/tabs/items/list-detail',id]">View</ion-button>

This is the component list-detail Page:

export class DetailPage implements OnInit, ViewWillEnter {
    items: any
    userId: any
    item0: any
    item1: any

constructor(private route: ActivatedRoute, private router: Router,
    public authService: AuthenticationService,
) {}

   ngOnInit() {
  }

    ionViewWillEnter() {
        this.myDefaultMethodToFetchData();
    }

    myDefaultMethodToFetchData() {
        console.log("IN")
        this.getItems().then((data) => {
            console.log("IN2222")
            this.items = data
            this.item0 = this.items[0];
            this.item1 = this.items[1];

        })
        this.userId = this.authService.userData.uid;
    }

returnItems(){
    this.router.navigate(['/tabs/items/']);
    }

getItems() {
    const itemsRef = firebase.firestore().collection("user_orders/" + this.userId+"/reservations")
        .where("ordini", "<", 10).limit(5);
    return itemsRef.get()
        .then((querySnapshot) => {
            return querySnapshot.docs.map(doc => doc.data());

        })
        .catch((error) => {
            console.log("Error getting documents: ", error);
        });
}

Then, in html page I have a button to return the items:

  <ion-content>
        <div class="flexbox-container" style="display:flex;">
            <div *ngIf="item0" class="sidebar" style="flex:1;">
                <video id="video1" height="320" width="240" controls>
                    <source src="{{item0?.downloadURL}}" type="video/mp4">
                    <source src="{{item0?.downloadURL}}" type="video/ogg">
                </video>

            </div>
            <div *ngIf="item1" class="main" style="flex:1;">
                <video id="video2" height="320" width="240" controls>
                    <source src="{{item1?.downloadURL}}" type="video/mp4">
                    <source src="{{item1?.downloadURL}}" type="video/ogg">
                </video>

            </div>
        </div>
    </ion-content>
    <ion-button id="button1" (click)="returnItems()">Return</ion-button>

What am I doing wrong?

I've noticed that every time I switch from items to list detail page, using the ionViewWillEnter() method, and try to print something in console, the print is recalculated but the data remain the same, so the problem I think is in html page:

Answer 1

ionViewWillEnter should work. Try ionViewDidEnter.

Answer 2

Maybe is late for an answer in this question but i think will be useful for future users. Related to OP question the mos efficient way is that using Events. It is something similar of use of custom events in javascript.
Using events you can do or refresh everything even in cached pages/components.

Below shows how you can subscribe a listener then call the event from everywhere, doing that listener to intercept the event you have raised.

Page that needs to be refreshed after back button is pressed

page.ts

  constructor( 
    private events: Events
  ) {}
  
  ngOnInit() {
    this.events.subscribe('back_refresh', (data) => { /*Do your operations here as it's always called */ });
  }

Page where back button is present

page.html

<ion-back-button (click)="this.goBack()"></ion-back-button>

page.ts

  constructor(
    private navController: NavController,
    private events: Events
  ) {}
  

  private goBack(): void{ 
    this.navController.pop();
    // also you can pass your data here
    this.events.publish('back_refresh', null); 
  }