加速 Angular Material 自动完成或替代方案答案

【问题标题】：Speeding Up Angular Material Autocomplete or Alternatives加速 Angular Material 自动完成或替代方案
【发布时间】：2019-07-25 21:46:42
【问题描述】：

我正在使用 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 材料自动完成很慢）？

【问题讨论】：

尝试将console.time 添加到您的filter_TSNs 方法以查看每个过滤器需要多长时间，尽管我希望它会很快。真正的罪魁祸首可能是自动完成/角度试图渲染 39k 选项组件（！）您可能希望在 filter_TSNs 中返回一个子集（如前 50 个选项）
威尔，你是个天才。一旦用户输入了至少 5 个字符，我最终只运行了 filter_TSNs 函数。前 5 个字符后返回的子集大幅减少（大约 50 个），问题出在自动完成/角度，而不是过滤器函数本身。

标签： angular autocomplete angular-material2

【解决方案1】：

Will Howell 的建议是“真正的罪魁祸首可能是自动完成/角度试图渲染 39k 选项组件（！）您可能希望在 filter_TSNs 中返回一个子集（如前 50 个选项）”是问题所在，应该是接受的答案。通过将搜索功能限制为仅在第 4 个字符之前显示自动完成的结果，自动完成变得即时。

【讨论】：

对于那些可能会问的人，您可以这样做：.map(val => val.length >= 4 ? this.filter_TSNs(val) : []);

【解决方案2】：

另一种解决方案是使用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 很重要，否则您将看不到它。

【讨论】：

谢谢，我觉得这个解决方案更优雅）
更新： 目前在 MatAutocomplete 中使用虚拟滚动存在一些问题，here is description

【解决方案3】：

在检查值长度后进行过滤使这项工作如PeekYou 提到的那样

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接答案可能会失效。 how to answer