Angular 更改检测，当从模板调用 function

Question

I have just called a function from a template and inside that I am simply returning true or false;

https://stackblitz.com/edit/angular-ivy-awrmsl?file=src%2Fapp%2Fapp.component.ts

Check the console of above link project, so array has 7 items but in console I can see twice logs. ( i have updated this question and stackblitz link) i have images and i want on error img tag should not be there so i called the same function twice from template whats correct ways to implement this type of logic? i need if error is there in image than no image tag should be there

Please check console logs .

I have not changed any property - what might be happening here?

(I tried different answers in a search engine search still not getting the exact point).

Answer 1

In angular, change detection is done by zone.js. Which figures out what part of the UI need to be re-rendered.

It will see your method checkimage , since it can't predict the value the method it will execute it. Hence you get multiple logs in the console.

Depending on the code inside the checkimage method it can cause performance issues. Rule of thumb: Don't call functions from the template.

You can change the code simply

<ng-container *ngIf="id.sr">
  ff {{i}}
  {{  id.sr }}
</ng-container>

Answer 2

ngDoCheck is lifecycle hook provided by angular .This method is used to detect and act upon changes that Angular can't or won't detect on its own.

This method runs after the ngOnInit once and also after each change detection cycle .

In the development mode, angular runs the extra change detection cycle initially.

In the production, you would only see one log in your case.

More here