Question

我是开发世界中的新手，遇到了我无法解决的问题。我正在构建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$变量（成功或错误）；

Answer 1

首先为例如声明一个新变量。 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>

Answer 2

首先，感谢 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发出结果之后调用任何函数或代码块。

如何在Ionic 3 App中为Observable添加加载程序？

2 个答案: