20k 条记录的 Angular 下拉列表

【问题标题】：Angular drop-down-list for 20k records20k 条记录的 Angular 下拉列表
【发布时间】：2018-07-24 15:52:45
【问题描述】：

我必须在我的应用程序的下拉列表中显示 20k 条记录。

我有搜索条件来查找ID 和Name 的下拉记录。

实现这种场景的最佳方式是什么？

【问题讨论】：

改用自动完成。
会影响应用性能吗？
自动完成在需要时加载请求。所以，在加载时间没有，但是当有人输入时，这取决于你的数据和响应。
假设在搜索中我正在输入数据库中可用的最后一条记录，在这种情况下会影响性能吗？感谢您的快速重播
这取决于您的后端方法。如果建立了正确的索引，那么它不会影响性能。

标签： angular dropdown

【解决方案1】：

您可以使用分页或使用虚拟下拉项目，只在滚动视口中呈现可见的 li

此代码可能对您有所帮助：

isElementInViewport(el) {
    const rect = el.getBoundingClientRect();
    const pdfContainer = this.element.nativeElement;

    const windowHeight = (pdfContainer.innerHeight || window.innerHeight || document.documentElement.clientHeight);
    const windowWidth = (pdfContainer.innerWidth || window.innerWidth || document.documentElement.clientWidth);

    const vertInView = (rect.top <= windowHeight) && ((rect.top  rect.height) >= 0);
    const horInView = (rect.left <= windowWidth) && ((rect.left  rect.width) >= 0);

    return (vertInView && horInView);
}

【讨论】：