typescriptangular2-templateangular2-piperxjs-observablesasync-pipe

Angular V9 Async pipe not updating template view on data change

I'm pretty much a standstill with this now guys. I'm using a small service to get the details from an API, returning a JSON object. I am returning this as an Observable from the service method; then initialising the local component variable "sateliteData$" with it on class creation.

In the HTML I'm trying to use the | async pipe to handle automatic change detection as the values from this API, change every second. But when looking at my application, it gets the first set of values and displays them to the screen, but never updates them.

You have to manually refresh the page to get different values, which is what I'm trying to avoid by using Observables and the | async pipe.

I've read so much online, and everything I'm doing seems to match what everyone else does. I just can't figure this out and would really appreciate someone taking the time to have a look at this for me.

See below screen grabs of the code.

Thanks guys.

r

enter image description here

enter image description here

Solution

  • The simplest way would be to poll the server at a fixed interval. You can achieve this using rxjs

    polling$ = interval(2000).pipe(switchMap(_ => this.service.MyGetRequest()));

    You can see a minimal working stackblitz here: https://stackblitz.com/edit/angular-ivy-ebebp4

    More information on simple polling here: https://www.learnrxjs.io/learn-rxjs/recipes/http-polling

    Take care if you are polling an external service or API that you do not own that you do not flood them with requests. Look at their documentation to determine what is or is not an appropriate interval.