ngx-codemirror仅在格式中单击后显示

Question

我使用@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>

。文件是

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

}
}

Answer 1

尝试添加一些样式。这对我来说是有效的，以调整代码镜像容器的大小，它的内容，还有一个你可以在代码镜像文档中查找，以加载X行以上和以下你的滚动显示，但玩这个:

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