Angular4 AutoComplete 运行速度非常慢，如何加快速度

Question

我正在我的网站上构建一个表单，允许用户从数据库中搜索客户，为此，我预加载客户，然后设置 Angular 4 自动完成组件以使用客户列表，但是渲染下拉菜单时运行速度非常慢。我确定这是因为要显示的结果太多，通常超过 6000 个。

有没有办法让自动完成功能使用我构建的自定义函数，该函数会等到确定用户完成输入后再返回结果，现在我正在使用与 Angular 示例中显示的完全相同的代码。

这是组件背后的 TS 代码:

this.filteredCustomers = this.customerControl.valueChanges
            .startWith(null)
            .map(val => val ? this.filterCustomers(val) : null);

filterCustomers(val: string): any {
        return this.agencyCustomers.filter(function (item: any) {
            var n = item.Name.trim().toLowerCase();
            return (n.search(val) >= 0);
        });
    }

这是 html:

<md-autocomplete #customers="mdAutocomplete">
                    <md-option *ngFor="let customer of filteredCustomers | async" [value]="customer.Name" [innerText]="customer.Name" (onSelectionChange)="customerChanged(customer, transaction)">
                    </md-option>
                </md-autocomplete>

非常感谢任何帮助。

Answer 1

在下拉列表中使用虚拟列表，仅渲染小块。

例如 - http://rintoj.github.io/angular2-virtual-scroll/