@angular/material 自动完成的性能问题

Question

我正在使用 Angular/Material Autocomplete。加载数据到 Autocomplete 会遇到严重的性能问题，比如渲染需要大约 30 秒，需要 10 多秒才能稳定，数据是从服务器加载的，从服务器接收数据非常快。为了解决这个问题，我使用了 cdkVirtualScroll，在向下滚动到结尾并再次单击文本框后，它在滚动其加载值后加载空弹出窗口。

html

   <mat-form-field>
      <input type="text" placeholder="Pick one" aria-label="Number" matInput [matAutocomplete]="auto">
      <mat-autocomplete #auto="matAutocomplete" (opened)="panelOpened()">
        <cdk-virtual-scroll-viewport itemSize="48" style="height: 240px" minBufferPx="96" maxBufferPx="144">
          <mat-option *cdkVirtualFor="let option of options" [value]="option">
            {{option}}
          </mat-option>
        </cdk-virtual-scroll-viewport>
        </mat-autocomplete>
    </mat-form-field>

TS

export class AppComponent  {
  options: string[] = [];

  @ViewChild(CdkVirtualScrollViewport, {static: true}) viewport: CdkVirtualScrollViewport;

  constructor() {
    for (let i = 0; i < 10000; i++) {
      this.options.push("#"+i);
    }
  }

  panelOpened() {
    if (this.viewport) {
      this.viewport.checkViewportSize();
    }
  }
}

检查前：https : //stackblitz.com/edit/angular-7vcohv?file=src%2Fapp%2Fapp.component.html

Answer 1

我不确定mat-autocomplete要支持多少选项，但我对提高性能的建议是：

1. 仅在用户输入至少 2 个字符后才填写自动完成功能。
2. 实现服务器端搜索并在获得较少数量的选项后填写自动完成选项。
3. 如果您认为这是 mat-autocomplete 组件的问题，您可以在@angular/material 存储库中提出问题。