为什么必须在 Component 中写 Object=Object 才能在 Angular 中获取 Object.keys？答案

【问题标题】：Why is it necessary to write Object=Object in Component to get Object.keys in Angular?为什么必须在 Component 中写 Object=Object 才能在 Angular 中获取 Object.keys？
【发布时间】：2019-08-07 05:11:00
【问题描述】：

在我的 Angular 模板中，我需要一个对象的键数。我在模板文件中写了{{ Object.keys(myObj).length }}。但它会抛出一个错误：ERROR TypeError: Cannot read property 'keys' of undefined。

然后我从互联网上得到了一个建议，所以我在我的组件中写了Object = Object，它起作用了。

我不明白这背后的理念是什么。
花括号中的其他表达式和语句如何在 Angular 模板中工作？

【问题讨论】：

标签： javascript angular angular6

【解决方案1】：

模板表达式上下文通常仅限于组件实例本身。因此，当您在 {{}} 中插入变量时，它实际上会查找底层组件实例的匹配属性或模板引用变量。

当您在组件中执行Object = Object 时，您实际上是在创建组件的属性Object，该属性引用该组件所引用的全局Object。

但是在模板表达式中是不可能的，除了undefined之外，它没有任何访问全局属性的权限。

docs 的这一部分解释了这一点：

模板表达式不能引用全局命名空间中的任何内容，除了未定义。他们不能引用窗口或文档。此外，他们不能调用 console.log() 或 Math.max() 并且他们是仅限于引用表达式上下文的成员。

【讨论】：

全局命名空间不可访问是一种缺点。我有一种预感，模板的上下文必须限于组件。

【解决方案2】：

您在模板中呈现的所有内容都应该是组件的一部分，这确实有助于封装，有助于防止将来出现错误、意外行为并使调试任务更容易另一方面，稍微偏离主题，避免使用 {{}} 中的方法，因为它们充当不纯的管道并且在每次用户与 DOM 交互时运行几次，最好保存函数的结果, 或 component.ts 中属性中的方法，并且该属性是您显示的属性

【讨论】：