ngx-codemirror 仅在单击 formarray 后显示答案

【问题标题】：ngx-codemirror displaying only after click in formarrayngx-codemirror 仅在单击 formarray 后显示
【发布时间】：2023-03-16 03:40:01
【问题描述】：

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

这是我的 .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, [Validators.required,Validators.pattern(/^[a-zA-Z0-9][a-zA-Z0-9\_]*$/),Validators.maxLength(255)]),
          responseType:item.responseType,
          extractPath: item.extractPath,
          projectId: item.projectId,
          isDataEdit:false
        }));
      }else{
        dataCtrl.push(this._fb.group({
          id: item.id,
          uuid: item.uuid,
          dynamicVariableName: new FormControl(item.dynamicVariableName, [Validators.required,Validators.pattern(/^[a-zA-Z0-9][a-zA-Z0-9\_]*$/),Validators.maxLength(255)]),
          responseType:item.responseType,
          extractPath:  new FormControl(item.extractPath, [Validators.required]),
          projectId: item.projectId,
          isDataEdit:false
        }));
      }
     
   }
   dataCtrl.disable();
   });
   
  }
  }

【问题讨论】：

标签： angular codemirror formarray form-control ngx-codemirror

【解决方案1】：

尝试为其添加一些样式。这对我来说可以将 codemirror 容器的大小调整为它的内容，并且您还可以在 codemirror 文档中查找一个以在滚动显示的内容上方和下方加载 X 行，但请尝试以下操作：

@Component({
  ...
  styles: [`
    :host ::ng-deep .cm-s-material.CodeMirror {
      resize: vertical !important;
    }
  `]
})
export class ...

【讨论】：