Question

我正在尝试为优惠券应用创建“收藏夹”部分。我检索当前用户的收藏夹凭证，并使用HTML中的ngFor显示它们。但是，我第一次打开“收藏夹”选项卡时，不会显示优惠券。但是，如果我转到另一个选项卡然后返回，它将显示。一次完成此操作后，即使我转到其他选项卡并返回，它仍会立即立即显示。只有重新启动我的应用程序后，该问题才会再次发生。我想知道如何确保优惠券第一次显示。

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

TS

ionViewWillEnter() {
    this.http.get('http://xxxx.com/api/users').subscribe((data: any)=>{
      this.users=data["data"]
    })

    this.authService.user().subscribe(
      user => {
        this.user = user;
      } 
    );
    this.getFavourites()
}
getFavourites(){
    var i;
    for(i=0; i<this.users.length;i++){ //Check all users for current user
      if(this.users[i].first_name === this.user.first_name){
        this.favourites = this.users[i].getfavourites //extract array of favourited vouchers
      }
    }
}

HTML

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

更新：基于Sergey解决方案的固定代码

TS

ngOnInit(){
  this.http.get('http://xxxx.com/api/users').subscribe((data: any)=>{
  this.users=data["data"]
 })
}

async ionViewWillEnter() {
    this.user = await this.authService.user().toPromise();
    this.getFavourites()
}

Answer 1

问题是您的getFavorites（）方法依赖于您尝试异步并行获取的几个数据源，因此一旦它们完成执行，就已经对getFavorites（）进行了调用。基本上，这意味着您调用getFavorites（）的 after 后，ionViewWillEnter内部的两个异步调用完成了。

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

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（）甚至从构造函数方法中请求数据。

在加载数据之前，Ionic选项卡完成显示

1 个答案: