Angular Material Form自动完成，包含5000个值

Question

我正在使用Angular 7和Angular Material。

我通过将值直接存储在我的组件中来使用autocomplete angular form material component。

除了现在，我想过滤超过5000个值。如果我将它直接存储在我的组件中，我会失去性能。

我需要采取什么策略？

Answer 1

这是特定于案例的。我建议如下：

不要在ngOnInit自动排序所有5000条记录，而是等到用户首次在自动完成搜索栏中输入内容。输入一个字母后，执行一个API调用，该调用将在后端过滤这些记录，返回这些记录的较小部分。

然后将在前端执行剩余的过滤。

Answer 2

输入任何要过滤的数据时，必须分页加载最多为20个元素。并使用去抖时间和主题来触发输入数据并取消可观察。