时间戳

首页 > 解决方案 > 当我有更多数据时，选择数据非常慢

angular - 当我有更多数据时，选择数据非常慢

问题描述

选择视图很慢，但是当我有更多数据时，选择非常慢。

我使用了这段代码：

HTML

<div class="row">
     <div class="input-field col s8">
      <div formArrayName="data_id">
        <div class="form-group" *ngFor="let itemm of editdataForm.get('data_id').value; let i = index">
          <br>
          <select formControlName="{{i}}" id="data_id" materialize="material_select" [materializeSelectOptions]="items"
            [ngClass]="{invalid: invalidInputs}">
            <option value="" disabled selected>Select Data</option>
            <option *ngFor="let item of items" [value]="item.data_id">{{item.data_name}}</option>
          </select>
          <div class="button-left">
            <button *ngIf="editdataForm.controls.data_id.value.length > 1" type="button" class="fa" (click)="onRemoveItem(i)">x</button>
          </div>
        </div>
      </div>
    </div>
    <div class="input-field col s2">
      <button type="button" class="btn" (click)="onAddData()">AddData</button>
    </div>
  </div>

TS

   this.editdataForm= new FormGroup({
      'data_id': this.fb.array([]),
      .........
    });
  populateFormData() {
    this.activatedRoute.params.subscribe(
      params => {
        this.hps.getdata(params['id']).subscribe(
          data=> {
            this.data= data;
            ....
            this.data.sensors.forEach(x => {
              (this.editdataForm.get('data_id') as FormArray).push(new FormControl(x.data_id))
            });
          }
        );
      }
    );
  }
  onAddData() {
    (<FormArray>this.editdataForm.controls['data_id']).push(new FormControl('', Validators.required));
  }
  onRemoveItem(index: number) {
    (<FormArray>this.editdataForm.controls['data_id']).removeAt(index);
  }

当有很多数据时，此代码运行良好，但速度很慢。拜托，你能问我如何优化这个吗？如何使工作快速？

谢谢！

标签： angularperformancetypescriptselect

解决方案

您可以更改从后端获取数据的方式

populateFormData() {
    this.activatedRoute.params.pipe(
       flatMap(params => this.hps.getdata(params['id']))
    ).subscribe(
          data=> {
            this.data= data;
            ....
            this.data.sensors.forEach(x => {
              (this.editdataForm.get('data_id')as FormArray).push(new FormControl(x.data_id))
            });
          }
        );
  }

您也可以创建一个小方法，轻松返回您的 FormArray

get data_id ():FormArray {
  return this.editdataForm.get('data_id')
}

然后你的 populateFormData 代码会改变一点

从 (this.editdataForm.get('data_id')as FormArray).push(new FormControl(x.data_id))

将会this.data_id.push(new FormControl(x.data_id))

也可以使用之前在html模板中创建的方法

更新

您可以做的主要改进是更改处理订阅以获取数据的方式。我分享的代码是你怎么做的，一个例子，另一种方法只是让你的代码更简单，你可以使用你自己的代码来设置表单数组中的数据

推荐阅读