Проблемы с производительностью при автозаполнении @angular/material

Question

Я использую Angular/Material Autocomplete. При загрузке данных в 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 нацелена на поддержку, но мои предложения по улучшению производительности:

1. Заполните автозаполнение только после того, как пользователь набрал не менее 2 символов.
2. Реализуйте поиск на стороне сервера и заполните параметры автозаполнения после того, как вы получили меньшее количество параметров.
3. Если вы считаете, что это проблема с компонентом mat-autocomplete, вы можете открыть проблему в репозитории @ angular / material.

Answer 2

Я считаю, что основная проблема заключается в том, что вы используете viewChild для ссылки на viewPort, но есть несколько окон просмотра. При настройке автозаполнения в HTML были аналогичные проблемы с настройкой.

Похоже, что приведенный ниже StackBlitz работает. Я бы подумал, что это сработало бы, если бы на экране было только одно автозаполнение.

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