Angular 角度6，大数据使用被动形式导致性能降低

我正在使用angular6/mat对话框模式同步呈现多/单选择下拉列表值（已经从api接收到数据）。。表单按预期工作，但当用户单击实际的“选择”下拉列表以及尝试在下拉列表中选择项目时，性能非常慢。对于特定的选择字段，某些选项最多可以是500-1000项。如蒙协助，将不胜感激

示例数据（this.Data）

模板

<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>

{{option.label}
{{val.label}}
{{option.values}}

打字稿

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);
}

公共原始数据：任意[]；
公共myForm:FormGroup；
public formHelper=[]；
恩戈尼尼特（）{
this.rawData=this.data
this.constructForm（）
}
私人表格（）{
const formObj={}；
for（设i=0；i

速度很慢，因为要向DOM添加500到1000个节点

我不知道有什么方法可以让它更快，但是你有没有考虑过一个有数百种选择的下拉列表可能不是一个好的用户体验

---

通过将其转换为自动完成，您可能能够提供更好的用户体验和更好的性能。

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

我不知道有什么方法可以让它更快，但是你有没有考虑过一个有数百种选择的下拉列表可能不是一个好的用户体验

---

通过将其转换为自动完成，您可能能够提供更好的用户体验和性能。

如果用户搜索，您可以执行延迟加载（例如：50行，然后在滚动时获取其他50行），然后使用任何排序算法，如merge或binary。为什么不使用from Angular CDK？您介意创建一个复制此问题的示例吗？我也许能帮上忙。：）您可以执行延迟加载（例如：50行，然后在滚动时获取其他50行），如果用户进行搜索，则可以使用任何排序算法，如merge或binary。为什么不使用from Angular CDK？您介意创建一个复制此问题的示例吗？我也许能帮上忙。：）

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);
}