0

Angular : 4.1.0

I have a component HTML like this:

<div class="valign-wrapper" style="margin-bottom: 8px;font-size: 15px">
  <img [src]="((**getProfilePhoto(item.userId)** | async)?.profilepicUrl)" class="responsive-img circle" style="height: 40px; width: 40px; margin-right: 10px" onerror="this.onerror=null;this.src='../assets/user.png';">
  <span style="font-family: 'Nunito', sans-serif">{{item.author}}</span> </div>

Now the corresponding function for getting the image is like this:

getProfilePhoto(userID){
    this.users = this.db.object('/social/user/'+userID+'/');
    return this.users;
}

The image loads correctly. but the function getProfilePhoto(userID) keeps on running indefinitely; even after the image is loaded the functions keeps running so the web page freezes after some time.

jonrsharpe
  • 115,751
  • 26
  • 228
  • 437
  • This is because you are calling function in template, so whenever change detection is run, function is called, so it creates an infinite loop. You should handle all logic in component, and just display variables in the template to get around this issue :) – AT82 May 06 '17 at 12:17
  • I got your point! i have added the constructor above! its a section of a redux store! now how will i iterate it to show in the template? any ideas –  May 06 '17 at 12:22
  • Question edited –  May 06 '17 at 12:25
  • Please don't change questions once they've been answered – jonrsharpe May 06 '17 at 12:48

0 Answers0