从模板调用函数时的角度变化检测答案

【问题标题】：Angular change detection, when calling a function from template从模板调用函数时的角度变化检测
【发布时间】：2020-05-19 20:45:34
【问题描述】：

我刚刚从模板调用了一个函数，在里面我只是返回真或假；

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

检查上述链接项目的控制台，所以数组有 7 个项目，但在控制台中我可以看到两次日志。 ( 我已经更新了这个问题和 stackblitz 链接）我有图像，我想要错误 img 标签不应该在那里，所以我从模板中调用了两次相同的函数什么是实现这种逻辑的正确方法？ 我需要图像中是否存在错误而不是图像标签不应该存在

请检查控制台日志。

我没有更改任何属性 - 这里可能发生什么？

（我在搜索引擎搜索中尝试了不同的答案，但仍然没有得到确切的答案）。

【问题讨论】：

您到底想知道什么？作为基本规则，从模板中调用函数不是一个好主意。
是的，你能举个例子，为什么从模板调用一个函数不是一个愉快的例子，有时它会按我们预期的那样运行，有时它运行得比预期的要多。次。我已经更新了我最初尝试的堆栈闪电战链接中的代码

标签： javascript angular angular-changedetection

【解决方案1】：

在 Angular 中，变化检测由 zone.js 完成。其中确定了 UI 的哪一部分需要重新渲染。

它将看到您的方法checkimage，因为它无法预测它将执行它的方法的值。因此，您会在控制台中获得多个日志。

根据checkimage 方法中的代码，它可能会导致性能问题。经验法则：不要从模板调用函数。

您可以简单地更改代码

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

【讨论】：

感谢您的回复。我已经更新了问题，请您检查一下并提出解决方案并检查该链接中的最新代码，因为我也在尝试调用该图像的函数（错误）部分。
@LogicBlower 你的实际问题是什么？
请打开代码并查看控制台，它会显示 49 左右的值，我只想要一个解决方案，即代码（来自模板的函数调用）不应该运行那么多次。 ?希望这次你能理解我在找什么。

【解决方案2】：

ngDoCheck 是由angular 提供的lifecycle hook。此方法用于检测Angular 无法或不会自行检测到的更改并对其采取行动。

此方法在 ngOnInit 之后运行一次，也在每个 change detection cycle 之后运行。

在开发模式下，Angular 最初会运行额外的变化检测周期。

在生产中，您只会在您的案例中看到一个日志。

More here

【讨论】：

感谢您的回复。我已经更新了问题，请您检查一下并提出解决方案并检查该链接中的最新代码