Angular 2: Duplicate Async Calls in Template Loop

Question

I have a template with an ngFor that receives data via an async observable:

<div *ngFor="let result of data.results">
  <div>
    <img [src]="parseSrc(result.src)" alt="{{ getCaption(result.id) | async }}" />
    {{ getCaption(result.id) | async }}
  </div>
</div>

The getCaption method, as you can see, is called twice. The code for it is below:

public getCaption(id: string) {
  return this.data$.results
    .map(results => {
      let result = results.find(r => r.id === id);
      return result && result.caption || '';
    })
}

Is calling it twice an okay way to do this? I feel like calling the function twice is redundant and memory-intensive. What are the other options? I was thinking something like creating a variable in the template would be good, but that's not a facility angular allows. Since this is an ngFor as a result of another async call, performing this logic in the controller code is less than desirable and I feel like there should be a relatively elegant way to perform these two identical calls in the template.

Note: this is a contrived example.

Teddy Sterne · Accepted Answer · 2017-12-05 19:35:37Z

2

You can wrap it in an ngIf and use the as syntax to bind it to a local value like so:

<div *ngIf="getCaption(result.id) | async as caption">
    <img [src]="parseSrc(result.src)" alt="{{ caption }}" />
    {{ caption }}
</div>

answered Dec 5, 2017 at 19:35

Teddy Sterne

14.3k2 gold badges49 silver badges52 bronze badges

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

Collectives™ on Stack Overflow

Angular 2: Duplicate Async Calls in Template Loop

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related