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.

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

Is it possible to select a tab in Angular 10 Material Tabs based on a route parameter?

Is there a way to merge my local store with Firestore using ngrx entity?

angular datatable pagination issue with mdb

"Series of Subscriptions: Unleashing New

Synchronizing Headers in the Angular PDF Viewer Control by Syncfusion

What are some alternatives for integrating React production build files apart from utilizing Express?

Utilizing symbols as a keyof type: A simple guide

JavaScript library declaration files are essential for providing type definitions and enabling

The type 'MenuOptions[]' cannot be assigned to type 'empty[]'

Typescript's forEach method allows for iterating through each element in

What steps can be taken to troubleshoot and resolve this specific TypeScript compilation error, as well as similar errors that may

Clearing dropdown values when navigating back on a page in Angular 6: A step-by-step guide

I encountered an issue with uploading an image file in Angular and am currently experiencing an error

Comparing Angular's 'ng serve' and 'npm start' commands

Tips for customizing the event target appearance in Angular 2?

unable to select date on mat-calendar

Utilize npm to compile TypeScript files as part of the npm build script execution

The switchMap function is sending back a single item

Establish a reactive form upon data completion (asynchronously) in Angular version 5

"Using Angular and TypeScript to dynamically show or hide tabs based on the selected language on a website