Ionic+AngularFire+Firestore应用重访页面时列表项不显示

你遇到的问题核心在于页面生命周期钩子的触发时机。Ionic里的ionViewDidLoad()只会在页面第一次被创建加载时执行一次，当你从首页跳转回来（重访），这个方法不会再次运行，所以你的订阅代码没机会重新获取数据，自然列表就空了。

解决方案1：改用合适的页面生命周期钩子 #

把ionViewDidLoad()换成ionViewWillEnter()或者ionViewDidEnter()，这两个钩子会在每次页面进入可见状态时触发，完美适配重访场景：

ionViewWillEnter() {
  this.wineProvider.getWines().subscribe(wines => {
    console.log(wines);
    this.wines = wines;
  });
}

或者：

ionViewDidEnter() {
  this.wineProvider.getWines().subscribe(wines => {
    console.log(wines);
    this.wines = wines;
  });
}

解决方案2：使用AsyncPipe自动管理订阅（更推荐） #

手动订阅容易忘记取消，还可能导致内存泄漏，用Angular的async pipe可以让框架帮你处理订阅和取消，而且数据更新时会自动触发视图刷新：

1. 先把组件里的wines改成Observable类型：

wines$: Observable<Wine[]>;

ionViewWillEnter() {
  this.wines$ = this.wineProvider.getWines();
}

2. 然后在HTML模板里直接使用async pipe：

<ion-list>
  <ion-item *ngFor="let wine of wines$ | async">
    <!-- 你的葡萄酒数据展示 -->
    {{ wine.name }}
  </ion-item>
</ion-list>

这样不仅解决了重访页面的问题，还避免了手动订阅带来的潜在内存问题。

额外注意点 #

• 如果用手动订阅，记得在页面离开时取消订阅，比如在ionViewWillLeave()里调用订阅的unsubscribe()方法：

private wineSubscription: Subscription;

ionViewWillEnter() {
  this.wineSubscription = this.wineProvider.getWines().subscribe(wines => {
    this.wines = wines;
  });
}

ionViewWillLeave() {
  if (this.wineSubscription) {
    this.wineSubscription.unsubscribe();
  }
}

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