Question

例如，我有大量的字符串，并且字符串的数量随着时间的推移持续增加（我每秒通过websocket获取更新的数组）。
我需要的是显示组件中的所有字符串。好吧，最简单的解决方案是ngFor并将每个字符串包装在div中，但我不喜欢在组件中使用数百个div的想法。因此，我决定尝试只使用一个这样的文本区域（简短）：

<mat-form-field>
  <textarea matInput [formControl]='myArrayofStrings'></textarea>
</mat-form-field>

在组件中，每次获取新数组时，只需更新此值即可：

this.myArrayofStrings.setValue(newArray);

因此，我的问题是-此解决方案的可靠性，智能性和快速性如何？

对于这个琐碎的任务，也许还有其他更聪明的解决方案。
（我的堆栈是Angular 7，Angular Material ）

谢谢。

Answer 1

我认为，对于单行更新，没有一种持续更新大数据对象的好方法。在Angular中，如果更改了模板中引用的对象，则将完全重新渲染，并且在您的情况下，由于先前的数据日志不会更改，因此它将生成过时的渲染...因此，您必须将从请求中获取的日志与显示给用户的数据分开，以避免大数据出现UI崩溃。

一些想法：

创建表格：为标准角形材料创建数据源表，从您从套接字获取的日志中，但仅在表数据源获取时使用数据：我的意思是每次表请求其数据时，您都要检查您不断增长的对象，并相应地返回。例如，您可以使用分页或设置“刷新”按钮，然后仅重新渲染根据用户需求。（为此的良好基础是table examples /Table retrieving data through HTTP
提取成较小的块： 创建一个“存储桶数组”，然后仅推送到“存储桶”。例如：每个存储桶可容纳100行日志，并且只有在填充当前存储桶时才更新。这样，只有最后的1-99行会被重新渲染，其他项则不会。
创建数据包 创建对象，即行，并在新数据超过给定长度时才更新它们。例如，您仅在到达50条新行或每x行后更新视图。秒-通过这种方式，您可以将渲染和websocket事件分开，从而为UI腾出时间。

FormControl的setValue实际运行速度有多快？

1 个答案: