[Angular 6，大数据使用响应式表单会导致性能降低

Question

我正在使用angular6 / mat-dialog-modal来同步呈现多个/单个选择下拉列表值（已经从api接收到数据）。该窗体可以按预期工作，但是当用户单击实际选择时，性能会非常慢当他们尝试在下拉列表中选择一个项目时，选择AND。对于特定的选择字段，某些选项可能多达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

这很慢，因为您要向DOM添加500至1000个节点。