ngx-codemirror 仅在表单数组中单击后显示

如何解决ngx-codemirror 仅在表单数组中单击后显示

我使用 @ctrl/ngx-codemirror 输入表单数组中的 javascript 代码。但是只有在我在编辑器中单击后才会显示 codemirror 中的值。我知道我们应该刷新编辑器，但这只会刷新并显示表单数组中第一个编辑器的值。如何刷新循环中的每个编辑器？

这是我的 .html 文件

<tr formArrayName="dataHandler"
*ngFor="let data of testScriptForm.controls.dataHandler.controls; let i=index">
<td>{{i+1}}</td>
<td [formGroupName]="i">
    <input id="pathname" type="text" class="form-control" formControlName="dynamicVariableName"
    placeholder="Name" >
</td>
<td [formGroupName]="i" width="400">   
    <div class="codecontainer" *ngIf="data.value.responseType=='Javascript'">
    <ngx-codemirror #codeeditor
     formControlName="extractPath" [options]="{ lineNumbers: false,theme: 'default',mode: 'javascript' }" readOnly>
    </ngx-codemirror>
  </div>
</td>
<td>
</tr>

.ts 文件是

import { CodemirrorComponent } from "@ctrl/ngx-codemirror";
export class ApiVariablesComponent implements OnInit {
  @ViewChild('codeeditor') private codeEditorCmp: CodemirrorComponent;
  constructor(private _fb: FormBuilder,private apiService: ApitestService) {
  this.testScriptForm = this._fb.group({
      dataHandler: this._fb.array([
        this.dataHandler()
      ]),});   
   }
   dataHandler() {
    return new FormGroup({
      dynamicVariableName: new FormControl(null,[Validators.required,Validators.pattern(/^[a-zA-Z0-9][a-zA-Z0-9\_]*$/),Validators.maxLength(255)]),responseType: new FormControl(this.dataHandlerType[0],[]),extractPath: new FormControl(null,[Validators.required]),projectId: new FormControl(this.projectUuid,isDataEdit: new FormControl(true,[])
    });
  }
  
  //refresh the editor
  ngAfterViewInit(){
      setTimeout(()=>this.codeEditorCmp.codeMirror.refresh(),1000)
}
  
  //to display the formarray value
   display(){
   this.displayApi.dataHandler.forEach((item,i) => {
     if(item.status){
      if(item.responseType=='Text'){
        dataCtrl.push(this._fb.group({
          id: item.id,uuid: item.uuid,dynamicVariableName: new FormControl(item.dynamicVariableName,responseType:item.responseType,extractPath: item.extractPath,projectId: item.projectId,isDataEdit:false
        }));
      }else{
        dataCtrl.push(this._fb.group({
          id: item.id,extractPath:  new FormControl(item.extractPath,isDataEdit:false
        }));
      }
     
   }
   dataCtrl.disable();
   });
   
  }
  }