Using Angular, a function can be called recursively directly from within the HTML

Question

Using Angular, a function can be called recursively directly from within the HTML

I'm struggling with loading an image because the method getUserProfileImage() is getting triggered multiple times within a loop. Is there a way to ensure the method is only called once during each iteration? I understand that this issue is related to Angular's change detection strategy, but how can I effectively address it?

I've done some research on this topic and found several solutions involving hacks to stop change detection strategy, but I prefer not to resort to such workarounds.

    <div *ngFor="let user of listOfContacts">
            <img class="rounded profile-thumbnail ptr" [src]="getUserProfileImage(user.UserName, user.UserId)" id="image-id-{{user.UserId}}" [routerLink]="['/community/userProfile', '0', user.UserId]">
    </div>

getUserProfileImage() method located in ____.ts class

    getUserProfileImage(userName: string, itemId: number){

      let loadImageSub = this.util.getUserProfileImageByUserName(userName).subscribe(contactsObj => {

      let imageUrl = this.toUrl(contactsObj["Images"][0].SrcAttr);
      console.log("contact profile image", imageUrl);
      (<HTMLInputElement>document.getElementById("image-id-" + itemId)).src = imageUrl;
      loadImageSub.unsubscribe();

    });
 }

Error: The same image is being loaded repeatedly, causing recursive function calls. https://i.sstatic.net/xDIFD.png

angular typescript ngfor angular2-observables

Answer 1

Answer №1

Avoid calling functions in templates whenever possible, as you have already pointed out yourself. It seems like you are aiming to retrieve all data before rendering the template, ensuring a well-structured data format with images stored within each object for display using ngFor.

If your contacts are being fetched from an API call, consider utilizing forkJoin and switchMap to obtain the image URL for each object. The following example demonstrates fetching all users first, followed by retrieving posts associated with each user and storing them in a posts property within the original user data. Modify this approach according to your use case. Instead of using any, strive to specify data types for clarity.

// Retrieve all users first!
this.getUsers()
  .pipe(
    switchMap((data: any) => {
      // For each user, fetch their posts and combine with original user data
      return forkJoin(
        data.map((user: any) =>
          this.getPosts(user.id).pipe(map((postData) => ({ ...user, posts: postData }))
        )
      );
    })
  )
  .subscribe(data => console.log(data));

In your scenario, apply the same logic within switchMap to use forkjoin on all contact person images, attaching them to a property in your contact object instead of posts as demonstrated in the sample code above :)

Answer 2

Avoid calling functions in templates whenever possible, as you have already pointed out yourself. It seems like you are aiming to retrieve all data before rendering the template, ensuring a well-structured data format with images stored within each object for display using ngFor.

If your contacts are being fetched from an API call, consider utilizing forkJoin and switchMap to obtain the image URL for each object. The following example demonstrates fetching all users first, followed by retrieving posts associated with each user and storing them in a posts property within the original user data. Modify this approach according to your use case. Instead of using any, strive to specify data types for clarity.

// Retrieve all users first!
this.getUsers()
  .pipe(
    switchMap((data: any) => {
      // For each user, fetch their posts and combine with original user data
      return forkJoin(
        data.map((user: any) =>
          this.getPosts(user.id).pipe(map((postData) => ({ ...user, posts: postData }))
        )
      );
    })
  )
  .subscribe(data => console.log(data));

In your scenario, apply the same logic within switchMap to use forkjoin on all contact person images, attaching them to a property in your contact object instead of posts as demonstrated in the sample code above :)

Using Angular, a function can be called recursively directly from within the HTML

Answer №1

Similar questions

Building and executing an Angular 2 program on the Windows platform: Step-by-step guide

What could be causing the OnInit lifecycle hook to fail to execute properly?

Validating emails using angular material chips

Angular is showing an error indicating that the property "name" is not found on an empty object

The type 'MockStoreEnhanced<unknown, {}>' is not compatible with the type 'IntrinsicAttributes & Pick[...]

Is it possible to limit the items in a TypeScript array to only accept shared IDs with items in another array?

What is the proper method for transferring a JWT token to an external URL?

React, Storybook - Error TS2307: Button module not found or its type declarations. Can Storybook resolve this issue?

Sentry: Easily upload source maps from a nested directory structure

Angular2, multi-functional overlay element that can be integrated with all components throughout the application

Got a value of `false` for an attribute `closable` that is not meant to be a

What is the best way to send a confidential string from my Node.js backend to my Angular frontend without it being visible to the user?

Discover how to access and manipulate JSON files in an Angular application using

Encountering an issue while constructing an Angular library project. The 'ng serve' command runs smoothly on local environment, but an error message stating

Utilizing Loops to Generate Unique CSS Designs on an HTML Page

Creating ngModel dynamically with *ngFor in Angular 2: A guide

Strategies for Resolving Angular Unsupported Engines Alert

Tips for presenting random images from an assortment of pictures on a webpage

Achieve flattening of types using recursion in TypeScript with the help of const

What is the proper way to store the output in a variable? Angular and XLSX