大量使用双向绑定的输入元素对Angular2的性能有何影响？

Question

8

我有一个组件，它显示类似于电子表格的 UI。有很多元素与可变对象进行双向绑定 [(ngModel)]。

一旦输入数量超过 100 个左右，UI 就会变得迟缓。分析器显示很多时间用在十进制格式 (decimal pipe) 上。

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

我没有使用 ChangeDetectionStrategy OnPush，但我很好奇这将如何帮助，并如何在 html 输入上实际实现它与 [(ngModel)] 的结合。

- geejay

你是否正在使用 changeDetection: ChangeDetectionStrategy.OnPush？ - Günter Zöchbauer

不，我没有使用ChangeDetectionStrategy OnPush。 - geejay

1

这是更好的性能措施，可以更细粒度地控制变更检测应该执行多少工作。 - Günter Zöchbauer

尝试按照@GünterZöchbauer所说，使用OnPush作为您的ChangeDetectionStrategy，并且可以尝试使用虚拟滚动来避免更多输入的需求。 - dlcardozo

1

为什么不使用 FormGroup？ - Vova Bilyachat

显示剩余2条评论

2个回答

1

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

- kemsky

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Peter Salomonsen · Accepted Answer

页面上过多的输入框既对CPU又对用户造成压力。

与其同时显示许多输入框的电子表格, 我更愿意在只有当聚焦时将单元格作为输入框, 否则只显示单元格的值。使用*ngIf来检查当前正在编辑的单元格。

这样，通过仅使聚焦的电子表格单元格成为输入，应该能够保持所需的功能，并提高页面的性能。