Angular4 AutoComplete运行极慢,如何加快速度
我正在我的网站上构建一个表单,允许用户从数据库中搜索客户机。为此,我预加载客户机,然后设置angular 4 autocomplete组件以使用客户机列表,但是在呈现下拉列表时,它运行得非常慢。我确定这是因为要显示的结果太多了,通常是6000+倍 有没有一种方法可以让autocomplete使用我构建的自定义函数,该函数在返回结果之前等待用户完成键入,现在我使用的代码与angulars示例中显示的完全相同 以下是组件背后的TS代码:Angular4 AutoComplete运行极慢,如何加快速度,angular,autocomplete,observable,Angular,Autocomplete,Observable,我正在我的网站上构建一个表单,允许用户从数据库中搜索客户机。为此,我预加载客户机,然后设置angular 4 autocomplete组件以使用客户机列表,但是在呈现下拉列表时,它运行得非常慢。我确定这是因为要显示的结果太多了,通常是6000+倍 有没有一种方法可以让autocomplete使用我构建的自定义函数,该函数在返回结果之前等待用户完成键入,现在我使用的代码与angulars示例中显示的完全相同 以下是组件背后的TS代码: this.filteredCustomers = this.c
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>
非常感谢您的帮助
You Can Use Angular2 Auto Complete
--------------------------------------
Here is the link
您可以看到示例
它有许多功能。这将解决您的问题。使用下拉列表中的虚拟列表,只渲染小部分
在示例-中,在研究了几种解决方案后,我决定使用Priming components包,因为它解决了我的问题,并提供了Angular的基本组件集所没有的许多其他非常有用的组件。使用Teradata/共价库
试验
{{row}}
义务的
我使用的下拉列表和版本“^1.1.11”。我已将版本更新为2.0.1,速度稍快。但不太好,因为下拉列表中的数据集(记录)绑定较大,我认为是15k到20k。这就是呈现客户端大型数据集的插件问题
结论:
当用户写东西时需要调用API。并根据搜索参数制作API。您能提供plnkr吗?试着使用Priming组件Priming效果很好,这正是我想要的,谢谢!
<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>