Как добавить загрузчик для Observable в приложение Ionic 3? - PullRequest
Новая
       21

Как добавить загрузчик для Observable в приложение Ionic 3?

0 голосов
/ 02 ноября 2018

Я новичок в мире разработки и столкнулся с проблемой, которую не могу решить. Я создаю приложение 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$ (либо успех, либо ошибка);

Ответы [ 2 ]

0 голосов
/ 02 ноября 2018

Прежде всего, спасибо 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 () для вызова любой функции или блока кода после того, как наблюдаемый изменит результат.

0 голосов
/ 02 ноября 2018

Прежде всего объявите новую переменную, например, для. 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>
...