Angular 6, Большие данные приводят к снижению производительности при использовании Reactive Forms

Question

Я использую angular6 / mat-dialog-modal для синхронного рендеринга выпадающих значений multi / single select (данные уже получены из API). Форма работает, как и ожидалось, но производительность очень низкая, когда пользователь нажимает на фактическийвыберите выпадающий И когда они пытаются выбрать элемент в раскрывающемся списке. Некоторые параметры могут содержать до 500-1000 элементов для определенного поля выбора. Любая помощь будет принята с благодарностью

Пример данных (this.data)

[ // less than 30 objects in this array
 {
   id: "company1",
   label: "Amazon",
   state: {
     options: [ // could be 5000+ objects in this array
       {
         label: "Sony Playstation"
         selected: false
         value: "PS4"
       }
     ]
   },
   type: "multiSelect"
 }
]

Шаблон

<form *ngIf="myForm" [formGroup]="myForm" (submit)="onSubmit()">
  <mat-form-field *ngFor="let option of formHelper">
    <mat-label>{{ option.label }}</mat-label>

    <mat-select *ngIf="option.isMultiple" [formControlName]="option.id" disableOptionCentering multiple>
      <mat-option *ngFor="let val of option.values" [value]="val.value">
        {{ val.label }}
      </mat-option>
    </mat-select>

    <mat-select *ngIf="!option.isMultiple" [formControlName]="option.id" disableOptionCentering multiple>
      <mat-option [value]="option.values">
        {{ option.values }}
      </mat-option>
    </mat-select>
  </mat-form-field>
</form>

TypeScript

public rawData: any[];
public myForm: FormGroup;
public formHelper = [];

ngOnInit() {
  this.rawData = this.data
  this.constructForm()
}

private constructForm() {
  const formObj = {};

  for (let i = 0; i < this.rawData.length; i++) {
    const currObj = this.rawData[i];
    formObj[currObj['id']] = new FormControl([]);

    this.formHelper.push({
      id: currObj['id'],
      isMultiple: currObj['type'] === 'multiSelect',
      label: currObj['label'],
      values: currObj['state']['options']
    });
  }

  this.myForm = new FormGroup(formObj);
}

Answer 1

Это медленно, потому что вы добавляете от 500 до 1000 узлов в DOM.

Я не знаю ни одного способа сделать это быстрее, но вы уже подумали, что это выпадающий список с сотнями вариантов? вероятно не хороший пользовательский опыт?

Возможно, вы сможете обеспечить лучший пользовательский опыт и лучшую производительность, превратив его в автозаполнение.