Reload data in a component Ionic-CodePudding

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  style="display:flex;">
        <div *ngIf="item0"  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"  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:

CodePudding user response：

ionViewWillEnter should work. Try ionViewDidEnter.