I am facing an issue with my rxjs BehaviorSubject in Angular 2. I am subscribing to it using an async pipe and handling errors with a catch block. However, I am stuck in an infinite loop every time an error occurs. This is because my catch block returns the Observable from the BehaviorSubject, causing the async pipe to resubscribe to the observable.
Here is a simplified version of the code:
ListService - an @Injectable class that contains the BehaviorSubject and the property with the Observable.
private listSubject: BehaviorSubject<IItem[]>;
public get listObservable() {
return this.listSubject.asObservable()
}
private error(error: IError) {
this.listSubject.error(error);
}
ListComponent - a @Component that displays the list observable.
// Template
<items-view [items]="list | async"></items-view>
// Code
public get list() {
return this.listService.listObservable
.catch((error) => {
this.handleError(error);
return this.listService.listObservable;
});
}
The issue arises because my catch block returns the current observable, which causes an endless loop. I have tried returning a cached array in the error to return an Observable.of(error.cached), but it resulted in other problems as the async pipe seemed to lose its subscription to the BehaviorSubject.
I have tried different solutions but have been unable to break out of the infinite loop. Any help would be greatly appreciated.
Thank you in advance.