Javascript “离子”选项卡在加载数据之前完成显示

我正在尝试制作一个优惠券应用程序的收藏夹部分。我检索当前用户最喜欢的凭证，并在HTML中使用ngFor显示它们。但是，在我第一次打开“收藏夹”选项卡时，凭证不会显示。但是，如果我转到另一个选项卡，然后返回，它将显示。在我这样做一次之后，即使我转到其他选项卡并返回，它也会立即继续显示。只有重新启动应用程序后，问题才会再次出现。我想知道我如何才能确保凭证第一次显示

我将收藏夹凭证的提取放在ionViewWillEnter（）函数中

TS

---

问题是getFavorites（）方法依赖于您尝试以异步方式并行获取的几个数据源，因此一旦它们完成执行，您就已经调用了getFavorites（）。这基本上意味着，在调用getFavorites（）之后，IonView中的两个异步调用将进入finish

您似乎在代码中使用了可观察对象，因此您应该能够执行以下操作：

async ionViewWillEnter() {

    this.users = await this.http.get('http://xxxx.com/api/users').toPromise();
    this.user = await this.authService.user().toPromise();
    this.getFavourites()

}

---

此外，此生命周期挂钩（ionViewWillEnter）不是启动数据采集调用的最佳方式，因为它是通过转换动画而不是在类实例化时启动的。理想情况下，您希望使用ngOnInit（），或者甚至可以从构造函数方法中请求数据。

嘿，您的意思是希望页面仅在数据实际加载时加载？谢谢您的回答。我对您的解决方案进行了研究，并将其与类似的更改一起使用。

<ion-list>
    <ion-item lines="none"  *ngFor="let favourite of favourites">
      <ion-label> 
        <a routerLink="/details" routerDirection="forward" (click)="openDetails(favourite)"><img class="voucher_image" `enter code here`src='http://xxxx.com/imgs/vouchers/{{favourite.image}}'></a>
      </ion-label>
    </ion-item>
 </ion-list>

ngOnInit(){
  this.ionViewWillEnter()
 })
}

async ionViewWillEnter() {
   this.http.get('http://wuiske.com/api/usersall').subscribe((data: any)=>{
   this.users=data
  })
   this.user = await this.authService.user().toPromise();
   this.getFavourites()
}

async ionViewWillEnter() {

    this.users = await this.http.get('http://xxxx.com/api/users').toPromise();
    this.user = await this.authService.user().toPromise();
    this.getFavourites()

}