Angular4 AutoComplete运行速度极慢,如何加快速度

时间:2017-07-15 05:19:49

标签: angular autocomplete observable

我在我的网站上构建一个表单,允许用户从数据库中搜索客户端,为此我预加载客户端,然后设置角度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>

非常感谢任何帮助。

5 个答案:

答案 0 :(得分:1)

您可以使用 Angular2自动完成

以下是链接 - https://github.com/sksushil999/auto-complete 你看到例子 - http://plnkr.co/edit/ExzNSh?p=preview

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

答案 1 :(得分:1)

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

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

答案 2 :(得分:1)

我使用了这个下拉列表,版本为“ ^ 1.1.11”。我将版本更新到了2.0.1,这要快一点。但是由于下拉列表中绑定的数据集更大,所以效果不好,我认为15k到20k 。那是渲染客户端大型数据集的插件问题。

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

答案 3 :(得分:0)

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

答案 4 :(得分:0)

使用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>