AsyncPipe not updating properly

Question

I am currently experimenting with the Angular AsyncPipe in combination with ngIf. The observable in production comes from the HttpService, it is extended with a retry strategie for error handling.

The template looks like this:

<div *ngIf="(configuration$ | async) as configuration; else loading">
  <p>{{configuration}}</p>
</div>

<ng-template #loading>
  <p>Loading...</p>
</ng-template>

The retry strategie uses a dialog for the error and after the dialog is dimissed, the observable should be rerun.

If no error occurs the template is loading properly and everything works just fine. However, after the error occurs only one in the beginning and the user dismisses the dialog to start a retry the value is not properly shown in the template.

I included an example as well.

In the example I mock the HttpService from Angular to show the behaviour.

Check your console there is an error – Just code Dec 28 '18 at 10:19 — Just code, Dec 28 '18 at 10:19
why are u throwing an error at the beginning – Sachila Ranawaka Dec 28 '18 at 10:33 — Sachila Ranawaka, Dec 28 '18 at 10:33

score 0 · Answer 1 · answered Dec 28 '18 at 10:34

0

You are throwing an error at the beginning through observable.error. Change your logic or remove that.

public getConfiguration(): Observable<string> {
  return Observable.create((observer) => { 
      observer.next('Hello World.'); 
  });
}

Demo

answered Dec 28 '18 at 10:34

Sachila Ranawaka

39,756
7
56
80

The example I provided is just an example to show the behavour I am experiencing. In production I use the HttpService which can throw the error in the beginning. – kkla320 Dec 28 '18 at 10:49

AsyncPipe not updating properly

1 Answers1