Question

我正在使用Angular / Material Autocomplete。在将数据加载到自动完成功能时，会遇到严重的性能问题，例如渲染大约需要30秒，并且要花10秒钟才能变得稳定，因此需要从服务器加载数据，并且从服务器接收的数据非常快。还有其他人遇到问题吗？如果是，您如何解决该问题。

html

<mat-form-field>
  <input  placeholder="Pick one" aria-label="Number" matInput [matAutocomplete]="auto">
  <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let option of options" [value]="option" class="autocomplete-item">
        {{option}}
      </mat-option>
  </mat-autocomplete>
</mat-form-field>

TS

export class AppComponent implements OnInit {

  options = [];  

  ngOnInit() {
    for (let i = 0; i < 10000; i++) {
      this.options.push(i + '-sdfsdff');
    }
  }
}

Answer 1

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

仅在用户键入至少2个字符后填写自动填充。
执行服务器端搜索，并在选项数量较少后填充自动完成选项。
如果您认为这是mat-autocomplete组件的问题，则可以在@angular/material repository中打开一个问题。

Answer 2

我认为核心问题是您正在使用viewChild引用viewPort，但是有多个视口。 html中的“自动完成”设置在设置方面存在类似问题。

下面的StackBlitz似乎正在工作。我认为，即使屏幕上只有一个自动完成功能，您的操作方式还是可以的。

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

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

2 个答案: