Using the Async Pipe within a template inside an ngFor directive causes a series of HTTP GET requests to

Question

Using the Async Pipe within a template inside an ngFor directive causes a series of HTTP GET requests to

Below is a component Template I am working with:

<div *ngFor="let ctrl of data; trackBy:ctrl?.Id">
   <div *ngIf="getNext(ctrl.nextDate) | async as next">
        <span>{{next | date: 'dd.MM.yyyy'}}</span>
   </div>
</div>

In this template, there is a method called getNext() that returns an Observable<Date>:

public getNext(deadline: string): Observable<Date> {
   return this.http.get<Date>(`${this.config.apiEndpoint}/api/meeting?deadline=${deadline}`);
}

My issue arises when I try to invoke the method and subscribe to the observable using the async pipe in the template. The problem is that when I run the application, it keeps generating endless GET and OPTIONS requests.

Even if I move the method call outside the ngFor loop, the same issue occurs. The call needs to be made inside the ngFor loop because the parameter varies for each collection item.

I'm puzzled as to why the method is only being called once and no additional calls are generated after the initial subscription?

angular typescript observable rxjs5

Answer 1

Answer №1

It is often discouraged to call functions in a template as it can result in unpredictable outcomes. To avoid this, consider restructuring your code like this:

data: any = [....] // some data
data$: Observable[];

ngOnInit() {
    this.data$ = this.data.map(elem => this.getNext(elem));
} 

public getNext(deadline: string): Observable<Date> {
   return this.http.get<Date>(`${this.config.apiEndpoint}/api/meeting?deadline=${deadline}`);
}

You can then display the data in your template like this:

<div *ngFor="let ctrl of data$">
   <div *ngIf="ctrl | async as next">
        <span>{{next | date: 'dd.MM.yyyy'}}</span>
   </div>
</div>

Feel free to check out this stackblitz example demonstrating a similar process: https://stackblitz.com/edit/angular-nyn4qz

Answer 2

It is often discouraged to call functions in a template as it can result in unpredictable outcomes. To avoid this, consider restructuring your code like this:

data: any = [....] // some data
data$: Observable[];

ngOnInit() {
    this.data$ = this.data.map(elem => this.getNext(elem));
} 

public getNext(deadline: string): Observable<Date> {
   return this.http.get<Date>(`${this.config.apiEndpoint}/api/meeting?deadline=${deadline}`);
}

You can then display the data in your template like this:

<div *ngFor="let ctrl of data$">
   <div *ngIf="ctrl | async as next">
        <span>{{next | date: 'dd.MM.yyyy'}}</span>
   </div>
</div>

Feel free to check out this stackblitz example demonstrating a similar process: https://stackblitz.com/edit/angular-nyn4qz

Answer 3

Answer №2

During each event cycle, Angular executes the getNext function which sends a new http request and generates a new Observable. To optimize performance, it is advisable to cache the initial Observable created by the function call. I suggest creating them in the controller and passing them as variables in the template.

Answer 4

During each event cycle, Angular executes the getNext function which sends a new http request and generates a new Observable. To optimize performance, it is advisable to cache the initial Observable created by the function call. I suggest creating them in the controller and passing them as variables in the template.

Answer 5

Answer №3

It is highly likely that your issue stems from change detection.

Whenever Angular detects a potential change in what is required to render your template (such as during any browser event unless your component is set to OnPush), it will redraw the component, subsequently reinitiating the loop and observable.

In such scenarios, you have two options:

Ensure that change detection is only triggered when necessary (e.g., by aligning your component with the OnPush ChangeDetectionStrategy). This method usually works best if only a limited number of @Input() properties prompt updates.
Make the requests just once in ngOnInit or ngOnChanges (if data is an @Input() of your component), store the results in an array, and use this array in your template for iterating through data (this approach is recommended).

Answer 6

It is highly likely that your issue stems from change detection.

Whenever Angular detects a potential change in what is required to render your template (such as during any browser event unless your component is set to OnPush), it will redraw the component, subsequently reinitiating the loop and observable.

In such scenarios, you have two options:

Ensure that change detection is only triggered when necessary (e.g., by aligning your component with the OnPush ChangeDetectionStrategy). This method usually works best if only a limited number of @Input() properties prompt updates.
Make the requests just once in ngOnInit or ngOnChanges (if data is an @Input() of your component), store the results in an array, and use this array in your template for iterating through data (this approach is recommended).

Using the Async Pipe within a template inside an ngFor directive causes a series of HTTP GET requests to

Answer №1

Answer №2

Answer №3

Similar questions

Updating content in Angular 4 X-editable form does not reflect changes in form value

What is the best way to add all the items from an array to a div element?

Obtaining the complete HTTP response status within an Angular 6/7 service

"Removing the index from an object's type in TypeScript: A step-by-step guide

Resolving undefined in Ionic 4: Returning Data from Modal

The `ngx-infinite-scroll` feature does not function properly on mobile devices when used in conjunction with the

"Encountering a Bug in Angular 2 Related to Chart.js

Creating dynamic HTML content for printing tasks with the use of variables in Angular6

Bringing in TypeScript declarations for the compiled JavaScript librarybundle

having difficulty accessing the value within the Angular constructor

Are you searching for ways to convert an object into an array?

Guidelines for segregating a Union from an Array

Anonymous function's return type

The presence of v-if does not depend on the model value to toggle the element

No bugs appeared in Next.js

What causes a Typescript error when attempting to escape a newline character?

Exploring the use of national flag emojis in VS code

What is the best way to retrieve the initial element in an array?

Pinia store encountering a Typescript Vue component issue: error message "The property 'testStore' does not exist on the 'CreateComponentPublicInstance' type."

Encountering a CSP error during the process of single sign-on using Azure AD with MSAL in an Angular application