Question

我正在使用Angular Materials自动完成功能，允许用户搜索格式的字符串：“[ID＃] - [Textual Description]”。数据在页面加载的最开始时被预先检索，并保存大约39,000个字符串。

我的HTML代码是：

<md-input-container>
    <input mdInput placeholder="TSN Search" [mdAutocomplete]="auto" [formControl]="TSN_Ctrl">
</md-input-container>

<md-autocomplete #auto="mdAutocomplete">
    <md-option *ngFor="let tsn of filtered_TSNs | async" [value]="tsn">
        {{ tsn }}
    </md-option>
</md-autocomplete>

我的打字稿代码是：

TSN_Ctrl: FormControl = new FormControl();
filtered_TSNs: any;

constructor(){
    this.filtered_TSNs = this.TSN_Ctrl.valueChanges
        .startWith(null)
        .map(val => val ? this.filter_TSNs(val) : this.dataService.tsnTitles.slice());
}

private filter_TSNs(val: string) {
    return this.dataService.tsnTitles.filter(option => new RegExp(`^${val}`, 'gi').test(option));
}

我基本上使用了Angular Materials示例中的标准代码，稍加适应。

自动完成功能非常慢，基本上没有响应。我知道有很多选项（39k字符串），但它是预先检索和本地存储的。

我能做些什么来加快速度，或者列表中的字符串太多了吗？如果我修改过滤器方法和字符串只包含ID字段，那么这可以加快进程吗？我是否需要使用完全不同的库（即，如果已知Angular Materials Autocomplete很慢）？

Answer 1

豪威尔的建议“真正的罪魁祸首可能是自动完成/角度尝试渲染39k选项组件（！）你可能想要返回filter_TSNs中的子集（如前50个选项）”是问题，应该是接受了答案。通过将搜索功能限制为仅显示自动完成的结果直到第4个字符，自动完成功能立即生效。

Answer 2

在检查了值的长度之后进行过滤使此工作如PeekYou所述

Answer 3

另一种解决方案是使用Virtual Scroll from the Angular CDK。

<mat-autocomplete #auto="matAutocomplete">
    <cdk-virtual-scroll-viewport itemSize="48" style="height: 256px">
        <mat-option *cdkVirtualFor="let tsn of filtered_TSNs | async" [value]="tsn">
          {{ tsn }}
        </mat-option>
    </cdk-virtual-scroll-viewport>
</mat-autocomplete>

height: 256px很重要，否则您将看不到它。

加速角度材料自动完成或替代

3 个答案: