Question

我正在尝试使用异步管道将直接可观察流实现到我的模板，并按照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的情况下实现直接错误处理？

Answer 1

尽管有myData$或.catch，

.startWith仍会发出其值。我认为最简单的解决方案是使用.mapTo(false)代替将所有排放映射到false。如果出现错误，它仍会发出true（并完成）。

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

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

1 个答案: