Ionic标签页先于数据加载完成，收藏券首次不显示问题求助

你碰到的首次打开收藏标签页不显示优惠券、切换后恢复的问题，本质是异步操作的执行顺序没把控好。咱们来捋一捋原因：

在最初的ionViewWillEnter()里，你同时发起了两个异步请求：

• http.get获取全量用户列表
• authService.user()获取当前用户信息

但getFavourites()是同步执行的——这时候两个异步请求还没返回结果，this.users和this.user都是空的，自然找不到对应的收藏优惠券，所以首次加载没内容。而切换标签页返回时，之前的异步请求已经完成，数据都存在内存里了，getFavourites()就能正常工作。

核心修复思路 #

要确保getFavourites()只有在用户列表和当前用户信息都完全加载完成后才执行，咱们可以用async/await来控制异步流程，同时优化查找逻辑：

修复后的完整TS代码 #

async ionViewWillEnter() {
  // 先等待用户列表请求完成，确保this.users有值
  const usersResponse = await this.http.get('http://wuiske.com/api/usersall').toPromise();
  this.users = usersResponse;
  
  // 再等待当前用户信息获取完成
  this.user = await this.authService.user().toPromise();
  
  // 两个关键数据都就绪后，再提取收藏列表
  this.getFavourites();
}

getFavourites(){
  // 用数组find方法替代for循环，更简洁高效
  const currentUser = this.users.find(user => user.first_name === this.user.first_name);
  
  if(currentUser){
    this.favourites = currentUser.getfavourites;
  } else {
    // 容错处理：找不到当前用户时清空收藏列表，避免渲染报错
    this.favourites = [];
  }
}

改动说明 #

1. 用async/await管控异步顺序：让两个异步请求按先后顺序完成，确保调用getFavourites()时，this.users和this.user都已经赋值。
2. 优化用户查找逻辑：用数组的find方法替代手动for循环，代码更简洁，可读性更高。
3. 增加容错处理：避免因找不到当前用户导致this.favourites为undefined，进而引发*ngFor渲染报错。

HTML部分不需要修改，只要this.favourites正确赋值，*ngFor就能正常渲染出收藏的优惠券啦。

内容的提问来源于stack exchange，提问作者Baguette