我正在將 Ionic 和 Firestore 用于我的網路應用程式。在一個組件中，我顯示了來自 firestore 資料庫的專案串列，url tabs/items/list-detail/ 中的專案的詳細資訊和其他修改影像的按鈕，然后有一個按鈕回傳 url tabs/items/。之后，如果我回傳到選項卡/專案/串列詳細資訊頁面，我希望使用修改后的專案重新加載串列，但頁面保持不變。我曾嘗試使用 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 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>
我究竟做錯了什么？我注意到每次我從專案切換到串列詳細資訊頁面時，使用 ionViewWillEnter() 方法，并嘗試在控制臺中列印一些東西，列印會重新計算但資料保持不變，所以我認為問題出在 html頁：
uj5u.com熱心網友回復：
ionViewWillEnter 應該可以作業。嘗試 ionViewDidEnter。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/361072.html
標籤：离子框架 谷歌云firestore
上一篇：如何根據列值更改線條顏色