如何提高海量数据的prime ng下拉性能

Question

我在我们的 angular 项目中使用了primeng 多选下拉菜单。但是我们需要加载的数据非常庞大，比如 4-5K 个元素。所以我的下拉菜单在加载过程中需要 10 秒。

请建议我提高性能以创建多选下拉列表的方法。

Answer 1

PrimeNG v8（以及根据我的经验，v7）有两个记录的属性，这些属性涉及使用非常长的选项列表提高 MultiSelect 输入的性能：

[virtualScroll]="true" itemSize="30"

virtualScroll启用基本性能增强，但未能设置该itemSize值会阻止性能提高。

itemSize影响分配给显示的选项面板中的选项的垂直空间量，30并为该面板中的每个选项渲染复选框和相邻的单行文本提供可接受的高度。

通常，当使用多选模板处理大于单行文本的图像或选项时，itemSize需要适当增加。（虽然可能性较小，但您可以使用较小的字体和缩小的itemSize.来填充更多条目。）

有关MultiSelect ，请参阅primefaces.org PrimeNG 文档中“文档”选项卡的“虚拟滚动”部分。