Angular4 AutoComplete 运行速度极慢，我该如何加快速度答案

【问题标题】：Angular4 AutoComplete running extremely slow, how do I speed it upAngular4 AutoComplete 运行速度极慢，我该如何加快速度
【发布时间】：2017-12-20 06:03:57
【问题描述】：

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

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

这是组件背后的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>

非常感谢任何帮助。

【问题讨论】：

你能提供一个plnkr吗？
尝试使用primeng组件primefaces.org/primeng/#/autocomplete
PrimeNG 效果很好，正是我想要的，谢谢！

标签： angular autocomplete observable

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

You Can Use Angular2 Auto Complete
--------------------------------------

Here is the link

https://github.com/sksushil999/auto-complete

And You see example

http://plnkr.co/edit/ExzNSh?p=preview

它有很多功能。这将解决您的问题。

【讨论】：

【解决方案3】：

我使用的这个下拉列表和版本“^1.1.11”。我已经将版本更新到了 2.0.1，速度有点快。但由于更大的数据集（记录）绑定在下拉列表中，我认为 15k 到 20k 并不好.这是渲染客户端大型数据集的插件问题。

结论：用户写东西时需要调用 API。并根据搜索参数制作 API。

【讨论】：

【解决方案4】：

在解决了几个解决方案后，我决定使用primeng组件包，因为它解决了我的问题，并提供了许多其他非常有用的组件，而Angular的基本组件集却没有。

【讨论】：

【解决方案5】：

使用 Teradata/共价库

https://teradata.github.io/covalent/#/components/virtual-scroll

<mat-form-field flex>
        <mat-label>Test</mat-label>
        <input name="test" matInput [matAutocomplete]="tdAuto"
              [(ngModel)]="testmodel" #test="ngModel" required
              (ngModelChange)="filter(testmodel)">
        <mat-autocomplete #tdAuto="matAutocomplete">
            <td-virtual-scroll-container #virtualScroll 
                         [style.height.px]="200" [data]="data">
                  <ng-template let-row="row" let-last="last" tdVirtualScrollRow>
                      <mat-option [value]="row">
                         <span>{{row}}</span>
                      </mat-option>
                  </ng-template>
            </td-virtual-scroll-container>

       </mat-autocomplete>
       <mat-error *ngIf="test.invalid">Obligated</mat-error>
</mat-form-field>

【讨论】：