Angular 2 async pipe on a function

Question

I'm trying to get a base64 from an api. The following code works fine.

private test = null;

ngOnInit() {
   this.loadCustomers();
   this.test = this.getSiteImage();
}

getSiteImage() {
   return this.CustomerService.getCustomerSiteImage('test.com').share();
}

<img class="avatar avatar-xl" src="{{ (test | async)?.image }}" alt="">

But I would rather like to use a function. When I change the code to the following:

getSiteImage(url) {
    return this.CustomerService.getCustomerSiteImage(url).share();
}


<img class="avatar avatar-xl" src="{{ (getSiteImage('test.com') | async)?.image }}" alt="">

I like to know why this isn't working and how I can properly achieve this.

---------EDIT:

To help people with the same problem in the future. Just as @thinkinkingmedia suggested. I put the observables in an object with the url as key.

I changed the getSiteImage(url) methode to:

getSiteImage(url) {
    if (url in this.imageObservables) {
      return this.imageObservables[url];
    } else {
      this.imageObservables[url] = this.CustomerService.getCustomerSiteImage(url).share();
      return this.imageObservables[url];
    }
}

Actually you are not passing any URL when calling to your method — TheUnreal
– TheUnreal, Commented Jul 7, 2017 at 14:23

Reactgular · Accepted Answer · 2017-07-07 14:52:47Z

12

The reason it's not working is because async is getting a new observable every time Angular checks the expression for a change.

In your first example:

{{ (test | async)?.image }}

Angular checks the expression which passes the value of the property test to async. Asycn then subscribes to the observable and waits for a value. In the next cycle of checking Angular passes the same observable to Async, and Async makes no changes as it's already subscribed.

In your second example:

{{ (getSiteImage('test.com') | async)?.image }}

Angular checks the expression which calls a function that creates an observable. This is passed to async which waits for a response. In the next cycle this gets repeated. Each change detection creates a new observable and the async never gets a chance to yield a result. For every new observable passed to async it unsubscribes to the previous.

answered Jul 7, 2017 at 14:52

Reactgular

55.1k24 gold badges175 silver badges219 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

KBeckers Over a year ago

Any idea how I can fix this? I like to use de URL as a parameter.

Reactgular Over a year ago

@KBeckers change the function so that it stores the observable in a object map using the URL as the key, then the next time it's called use the value from the map.

Daniel Rodríguez Meza Over a year ago

This was really useful, thx. My CPU was at 100% all the time due to this

Collectives™ on Stack Overflow

Angular 2 async pipe on a function

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related