*ngFor running an infinite loop in angular2

Question

I am trying to render object properties using keys in angular2 using below code:

<ul>
    <li *ngFor="let element of componentModel | keys;let i=index">
      {{element.key}}--{{element.value}}  // 1---Bhushan...loaded only once
      <span  *ngIf="element">{{ loadProperty(i,element) }}</span>
    </li>
</ul>

But I am facing a problem here. The output in the browser in loaded only once. but the method call i.e. loadProperty(i,element) is running in an infinite loop.

loadProperty(i:number,element:any){       
    console.log(element.key+'========'+element.value);
    console.log(element);      
}

means on browser output

(1---Bhushan)

is displayed only once but on the console its running infinitely like below:

I want to call this method only once per iteration.

any inputs?

Günter Zöchbauer · Accepted Answer · 2016-06-17 08:28:40Z

35

This is just Angular2 change detection at work calling loadProperty(i,element) over and over in each change detection cycle.

Calling methods from the template is discouraged because they are called very often. You should instead store the result in a property and bind to this property instead.

edited Jun 17, 2016 at 8:28

answered Jun 17, 2016 at 8:22

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

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

8 Comments

Bhushan Gadekar Over a year ago

I am not sure how to do this with property binding, do u have any plnkr for this where method will get called only once per iteration? @Gunter

Günter Zöchbauer Over a year ago

What are you trying to accomplish? Sounds like stackoverflow.com/questions/36427670/…

Bhushan Gadekar Over a year ago

pretty much same but I also want to pass the iterated element to the method. actually these elements are objects and I am providing an editor for each element based on its type to change its value. ie. if it's an object consisting of arrays then it will load objectEditorComponent & inside that it will load arrayEditorComponent for each array. thus I use *ngFor to iterate and pass iterated element to function to select correct editor based on its datatype. its a recursive process until it gets the last element.

Günter Zöchbauer Over a year ago

What part exactly is causing you troubles?

Günter Zöchbauer Over a year ago

That's exactly what the directive in the linked answer is supposed to do. <span *ngIf="element" (onCreate)="loadProperty(i, element)"></span> should do what you want.

|

Collectives™ on Stack Overflow

*ngFor running an infinite loop in angular2

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related