Angular 4 冻结 *ngFor 中的调用函数答案

【问题标题】：Angular 4 Freezes on Calling Function inside *ngForAngular 4 冻结 *ngFor 中的调用函数
【发布时间】：2017-07-03 07:43:03
【问题描述】：

我的 Angular 应用有一个奇怪的问题。鉴于此组件：

还有这个模板：

该页面将尝试永远加载，直到 Chrome 最终提示我关闭标签页。

如果不是 getDataForMonth(month) 我只是在 home.component.ts 中有一个名为 monthData 的数据对象，然后提供 [data] "monthData" ，那么它工作正常。

在以下情况下也可以正常工作：

我在home.component.ts 中有一个方法，描述为hi() {} 和然后在我的 html 中输入 [data] hi()。
我在home.component.ts 中有一个方法，描述为hi() {return "hey";} 和然后在我的 html 中输入 [data] hi()。
我在home.component.ts 中有一个方法，描述为hi(month) {return month;} 和然后在我的 html 中输入 [data] hi(month)。

getDataForMonth() 有什么可能破坏这个？这里有一些我不知道的限制吗？是否可能是与getDataForMonth() 无关的其他问题？

【问题讨论】：

【解决方案1】：

出于性能原因，您需要预先计算 *ngFor 中的函数调用。将 console.log 添加到您的 getDataForMonth() 方法中，以查看 Angular 调用此函数的频率。好的方法是创建每个月的函数结果数组并对其进行迭代。

【讨论】：

函数和属性有什么区别？每次更改检测时都会检查两者。
你知道为什么它会破坏它吗？
@ng2user 获取属性值比 javascript 中的函数调用更便宜。函数有很多开销，例如创建上下文。这对于 10 个函数调用并不重要。但是 10000 次函数调用会产生性能问题。附：对不起我的英语

【解决方案2】：

"不要在绑定中使用函数。你的函数将被调用每个变化检测周期。并且 Angular 在开发模式下运行 x2 个周期"

意味着永远不要使用 {{ getDataForMonth() }} 它会降低你的性能和错误的编码方式。

你可以这样试试

在 *ngFor 渲染之前创建完整的 Object 并传递给 *ngFor

【讨论】：