6

我正在使用 Angular/Material 自动完成。将数据加载到自动完成时会遇到严重的性能问题，例如渲染大约需要 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

4

2 回答 2

3

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

  1. 仅在用户输入至少 2 个字符后填写自动完成。
  2. 在您获得较少数量的选项后，实施服务器端搜索并填写自动完成选项。
  3. 如果您认为这是 mat-autocomplete 组件的问题，您可以在@angular/material 存储库中打开一个问题。
于 2019-05-29T06:33:36.510 回答
0

我相信核心问题是您使用 viewChild 来引用视口，但有多个视口。html 中的自动完成设置与设置有类似的问题。

下面的 StackBlitz 似乎正在工作。我认为如果你在屏幕上只有一个自动完成，你拥有它的方式会起作用。

https://stackblitz.com/edit/angular-rzqjz8?file=src%2Fapp%2Fapp.component.ts

于 2020-01-15T23:20:20.490 回答