Angular 4在调用函数里面冻结* ngFor
我的Angular应用程序有一个奇怪的问题。鉴于此组件:Angular 4在调用函数里面冻结* ngFor
与此模板:
页面会尝试加载永远,直到最终的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;}
和 然后饲料[data]
hi(month)
在我的HTML。
这是什么关于getDataForMonth()
可以打破这个?这里有一些限制,我不知道?是否有可能是其他一些与getDataForMonth()
无关的问题?
你需要预先计算在* ngFor函数调用的性能的原因。 将console.log添加到您的getDataForMonth()方法中,以查看角度将调用此函数的频率。 好方法是创建包含每个月的函数结果的数组并对其进行迭代。
功能和财产有什么区别?两者都将检查每个变化检测。 – ng2user
你知道为什么它会突破吗? – NetherGranite
@ ng2user获取属性值更便宜,然后在javascript中调用函数。函数有很多开销,例如创建上下文。这对于10个函数调用并不重要。但是10000个函数调用会产生性能问题。附:对不起我的英语不好 – stjimmy54
“不要在绑定使用的功能。您的函数将被要求 每次变更检测周期,并在开发模式的角度运行X2循环”
意味着永远使用{{getDataForMonth() }}它会降低你的性能和错误的编码方式。
你可以尝试这样的
* ngFor之前渲染创建完整的对象,并传递给* ngFor
功能和属性有什么区别?两者都将检查每个变化检测。 – ng2user
为什么如果函数没有使用'month'参数? –
@MurhafSousli哎呀,我错误地抄了我的代码。让我解决这个问题。 – NetherGranite