以反应方式使用异步管道处理可观察到的错误答案

【问题标题】：Handle observable errors with async pipe in a reactive way以反应方式使用异步管道处理可观察到的错误
【发布时间】：2018-04-27 02:17:21
【问题描述】：

我正在尝试使用异步管道将直接可观察流实现到我的模板，并按照this S.O answer. 中的描述处理错误代码如下：

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？

【问题讨论】：

标签： angular rxjs observable

【解决方案1】：

myData$ 仍然会发出它的值，尽管有.catch 或.startWith。我认为对您来说最简单的解决方案是使用.mapTo(false) 而不是将所有排放映射到false。如果有错误，它仍然会发出true（并完成）。

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

【讨论】：