10

I have a problem when i call a method from component in the template by interpolation: {{get_method()}}. The method runs, but in infinite loop I don't know why. Any help please ??

the code of method is like this :

get_name() {
  console.log("bonjour");
}

and I call it in my template like this :

{{get_name()}}

and this is the result :

enter image description here

7
  • I think it has to do with the fact that if you are going to interpolate something it most likely needs to have something. As in printing to the console gives angular no data to put in the interpolation. Maybe if you returned an empty string or something this would solve your problem Commented Mar 28, 2017 at 23:58
  • i already did but the method always loop in the template , it show the value returned in the template but the console still print in infinite loop Commented Mar 29, 2017 at 0:26
  • then it is kinda hard to determine the problem with 2 lines of code. if that is not the issue. Commented Mar 29, 2017 at 0:28
  • yes , but i have to fix this issue Commented Mar 29, 2017 at 0:32
  • I understand that but 2 lines of code tells you nothing about the problem. It is possible that there is something else wrong and is showing up as another problem entirely Commented Mar 29, 2017 at 0:50

3 Answers 3

21

You should not use methods in your template, because each time Angular runs change detection, the method will be called, which can happen often. So actually this is not an infinite loop, the method just gets called on each change detection.

To avoid this, you need to change your code to handle the logic of methods in your component, and use variables in your template instead.

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

5 Comments

I am in the process of developing a social-network which i need to get the name of user in each post published in the home page (like facebook) , so using of variables in this situation have no sense
Well you would have to construct your app so that you can use a variable/variables, you cannot call the method in the template, it will loop endlessly, like you have noticed ;)
I would probably fetch the posts, then all the users for each post. Make an object of the post and user, like: {post: 'post one', user: 'user one'} and push each object in an array, which you can then iterate in your template.
im using firebase as database so i get my data as firabaselistobservable and i iterate from this list as i think i can't get an object from two firabaselistobservable
You can subscribe to the observable, on which it becomes just a plain JS object (or array)
3

i finally found the sollution , it's to change Detection Strategy to OnPush for more information visite this link Change Detection Strategy: OnPush

6 Comments

It's still not a good idea to bind a method in the view. The method is still called every time change detection is called, even when it's much less.
i know and this what i want , I am in the process of developing a real time social-network
@GünterZöchbauer then what is the best solution other than Change Detection Strategy OnPush, can you please tell me
The best solution is to assign the value to a field and bind to that field instead. You can use it with or without OnPush.
@GünterZöchbauer if it 's a field ok, but if I want to call a method inside ngif on a button, then how I can do it, If I use change detection strategy the other event in the component are not working, but if am not using the change detection strategy then the method calls take place more than a time, how to get rid of it any idea ?.
|
0

In your component

getName:string;
ngOnInit() {
   this.get_name();
}
get_name() {
    console.log("bonjour");
    this.getName = "bonjour";
}

And in your view file

{{getName}}

1 Comment

I am in the process of developing a social-network which i need to get the name of user in each post published in the home page (like facebook) , so this method won't help me

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.