在组件 Ionic 中重新加载数据

Question

我将 Ionic 和 Firestore 用于我的网络应用程序。在一个组件中，我显示了来自 firestore 数据库的项目列表、url tabs/items/list-detail/ 中项目的详细信息和其他修改图像的按钮，然后有一个按钮返回网址 标签/项目/。之后，如果我返回 tabs/items/list-detail 页面，我希望列表重新加载修改后的项目，但页面保持不变。

我尝试过使用 ViewWillEnter 但不起作用。

在项目的html页面中有一个导航到详细页面的按钮：

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

这是组件列表-详细页面：

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);
        });
}

然后，在 html 页面中，我有一个返回项目的按钮：

  <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>

我做错了什么？

我注意到每次我从项目切换到列表详细信息页面时，使用 ionViewWillEnter() 方法，并尝试在控制台中打印一些东西，打印被重新计算但数据保持不变，所以我认为这个问题在html页面中：

Answer 1

ionViewWillEnter 应该可以工作。试试ionViewDidEnter。