如何在 Ionic 3 应用程序中为 Observable 添加加载器？答案

【问题标题】：How to add loader for Observable in Ionic 3 app?如何在 Ionic 3 应用程序中为 Observable 添加加载器？
【发布时间】：2019-04-06 04:01:01
【问题描述】：

我是开发领域的新手，遇到了一个我无法解决的问题。我正在构建 Ionic 3 应用程序并尝试将我的所有请求实现为 Observables。我想在应用程序从缓存或服务器获取数据时添加简单的微调器。我的代码：

home.ts

homeMenu$: Observable<Array<any>>

ngOnInit() {
  this.homeMenu$ = this.backend.getHomeMenu()
  .pipe(
    catchError(err=> {
      this.utils.presentToastError(err)
      return [];
    })
  )
}

home.html

<ion-item *ngFor='let item of homeMenu$ | async'>
  {{item.title}}
</ion-item>

如何将微调器添加到ngOnInit() 以处理将数据应用于this.homeMenu$ 变量（成功或错误）；

【问题讨论】：

标签： angular ionic-framework ionic3 observable

【解决方案1】：

首先感谢 Ciprian B 的想法，但不幸的是，我们似乎不能像那样在 pipe() 中调用函数或代码块。我找到了解决方法：

home.html

 <ion-spinner name="bubbles" *ngIf="showSpinner"></ion-spinner>

home.ts

  homeMenu$: Observable<Array<any>>
  showSpinner = false

  ngOnInit() {
   this.showSpinner = true
   this.homeMenu$ = this.backend.getHomeMenu()
   .pipe(
    tap(()=> {this.showSpinner = false}),
    catchError(err=> {
      this.showSpinner = false;
      this.utils.presentToastError(err)
      return [];
    })
  )

}

如果有错误情况一切都清楚，成功情况下我们必须使用 tap() 运算符在 observable 发出结果后调用任何函数或代码块。

【讨论】：

【解决方案2】：

首先声明一个新变量，例如。 showSpinnerAdd = false，接下来在 ngOnInit 开头添加 this.showSpinner = true。你会有这样的东西：

//declare
showSpinner = false;

ngOnInit() {
  this.showSpinner = true
  this.homeMenu$ = this.backend.getHomeMenu()
  .pipe(
    this.showSpinner = false;
    catchError(err=> {
      this.utils.presentToastError(err);
      this.showSpinner = false;
      return [];
    })
  )
}

然后在html文件中：

<div id="spinner" *ngIf="showSpinner"></div>
<ion-item *ngFor='let item of homeMenu$ | async'>
  {{item.title}}
</ion-item>

【讨论】：