Angular2具有许多带双向绑定的输入元素的性能

Question

我有一个显示类似于电子表格的UI的组件。有许多元素具有双向绑定[（ngModel）]到可变对象。

一旦输入数量增加到100左右，输入UI就会变得迟钝。分析器以十进制格式（十进制管道）显示大量时间。

我可以想到几个可能的解决方案：

1. 以某种方式使用不可变对象？
2. 自定义双向数据绑定？

我不使用ChangeDetectionStrategy OnPush，但我很好奇这将如何帮助以及如何在html输入上使用[（ngModel）]实际实现它。

Answer 1

页面上的许多输入字段对CPU和用户都有压力。

不是同时显示包含许多输入字段的电子表格 - 我宁愿只在聚焦时使单元格成为输入字段，否则只显示单元格的值。在输入检查中使用* ngIf来检查当前正在编辑的单元格。

通过这种方式，您应该能够保留所需的功能，但只需将聚焦的电子表格单元格作为输入 - 这样可以提高页面的性能。

Answer 2

由于NgModel是指令，它不支持更改检测策略，这意味着您应该避免使用NgModel。唯一的方法是创建使用OnPush策略并包装输入字段的自定义组件。