angular - 当我以角度增加这个数字输入时，为什么会调用这个模板中的其余方法？

Question

如果您查看此stackblitz代码：https ://stackblitz.com/edit/angular-ivy-xvxgrh at line 7in file recipie-ingredients.componentfrom recipie-ingredientsmodule 您可以看到我有一个数字输入。这意味着每次我增加该输入数字的值时modifyPeopleCount都会调用该方法。但是，当我增加该输入数字时，该角度模板中的其余方法也会被调用。比如adjustIngredientAmount也叫。这个功能如何在角度中调用？为什么不只modifyPeopleCount调用方法？

标签： angularangular-template

Answer 1

这是因为 Angular 的“变化检测”。

假设在 HTML 模板中你有这个：

<b> {{ adjustIngredientAmount(entry) }}</b>

所以应该显示的值是adjustIngredientAmount带有参数的函数的结果entry。但是编程语言可以知道函数结果的唯一合乎逻辑的方法是调用/执行它。

把这个想象成一个完整的黑盒，你无法查看它。所以你必须执行它才能获得价值。

Angular 正在运行“更改检测”（不会链接一篇文章，因为有这么多，只是寻找适合您阅读的内容），以便在某个函数的结果可能发生更改时进行某种“智能”猜测。

所以基本上：无论您在模板中使用什么函数来显示事物（或者如果在 等中使用） ngIf， ngFor只要“某事”发生变化，angular 都会执行这些函数，因为那时函数的结果可能不同。

“某事”并不容易解释，所以只需阅读有关它的文章即可。您还可以更改策略角度使用来评估何时可能发生了变化。

此外，还有一些方法可以手动“告诉”角度发生了变化。

像这样调用函数并没有“错误”，但是如果您的应用程序增长，您应该考虑避免在 html 中调用函数的模式，因为这些调用以后会成倍增长:)

---

编辑：添加我在其他答案下评论的内容：

一种解决方案可能是 OP 在创建数组时计算这些值，并将这些计算值作为一些元数据添加到数组中。然后他可以直接访问它们。但这始终是一种权衡。模板内的函数可以节省内存，但会消耗执行能力。另一种方式会消耗内存但节省执行力。