Обрабатывайте наблюдаемые ошибки с помощью асинхронного канала реактивным способом - PullRequest
Новая
       10

Обрабатывайте наблюдаемые ошибки с помощью асинхронного канала реактивным способом

0 голосов
/ 26 апреля 2018

Я пытаюсь внедрить прямые наблюдаемые потоки в мой шаблон с помощью асинхронного канала и обрабатывать ошибки, как описано в этом ответе S.O. Код следующий: 

export class MyClass {
  private myData$: Observable<any>;
  private hasError$: Observable<boolean>;

  constructor(private shared: SharedService) {
    this.myData$ = this.shared.data$;
    this.hasError$ = this.myData$.catch(err => Observable.of(true)).startWith(false);
  }

}

templateUrl: `
<div *ngFor="let elm of (myData$ | async)?.data">
...
</div>    
<div *ngIf="(hasError$ | async)" class="myDataErrorPlaceholder">
    <h3>Oooops ! An error occured.</h3>
</div>

`

Независимо от того, что я пытаюсь, myDataErrorPlaceholder никогда не будет скрыт.

Я подписался на свой hasError $ observable для отладки и мог видеть, что начальное значение из моего startWith транслировалось, но было немедленно заменено данными, полученными myData $. Я не могу действительно обернуть голову вокруг этого. Что вызывает такое поведение? Как я могу реализовать прямую обработку ошибок без необходимости вручную подписываться на Observable в моем компоненте?

1 Ответ

0 голосов
/ 26 апреля 2018

myData$ будет по-прежнему излучать свои значения, несмотря на наличие .catch или .startWith. Я думаю, что самым простым решением для вас было бы использовать .mapTo(false) вместо того, чтобы сопоставить все выбросы с false. Если есть ошибка, она все равно выдаст true (и завершит). 

this.hasError$ = this.myData$.pipe(catchError(err => of(true)), mapTo(false));
...