angular-reactive-forms - 以角度 6 加载大数据时，Formarray 渲染缓慢

Question

我正在使用 Angular 6。我正在使用 formarray 加载动态表单。

Formarray 包含超过 100 行的下拉框。在加载大数据时，它会挂起浏览器，需要更多时间来呈现数据。

那 100 行下拉列表包含州和城市列表。

在用户编辑时，我必须在呈现的下拉列表中显示选定的州和城市。

有什么办法可以提高formarray数据渲染的性能。

组件.html

 <Form [formgroup]="invest">
 <Div formArrayName="addinvest">
  <div *ngFor="let addinvest of invest.controls.addinvest.controls;let I= index>
   <div [formGroupName]="i">
    <select fromControlName="state">
     <option *ngFor="let state of states" [value]="state">{{state}}</option>
    </Select>
    <select fromControlName="state">
     <option *ngFor="let city of cities" [value]="city">{{city}}. 
  </option>
    </Select>
  </div>
 </div>
 </div>
 </form>

组件.ts

setStateControl(){
let control=<FormArray>this.invest.controls.addinvest;
This.statelist.foreach(x=> {
  Control.push(this.fb.group({
    state: x.state,
    City: x.city
  })
 }

在此之前，我已经加载了所有下拉列表。当用户编辑 from 我必须在下拉列表中显示相应的值

注意：上面的代码片段是示例。可能它包含一些拼写错误。