Ionic/Angular 预填充表单无法编辑及修改后重新提交问题求助

问题原因 #

• 你在<ion-textarea>上同时使用了{{com}}内容插值和[(ngModel)]双向绑定，Ionic的输入类组件在使用ngModel时会接管内容渲染逻辑，两个不同的数据源冲突会导致输入操作被拦截，看起来就像编辑功能被禁用。
• 你从Webservice获取数据后仅给this.com赋值，和ngModel绑定的this.editcom没有初始化，也会导致绑定逻辑异常。

修复方案 #

1. 先修改HTML代码，删除textarea标签内的{{com}}插值，仅保留ngModel绑定：

<ion-list>
  <ion-item>
    <ion-label>Text area example</ion-label>
    <!-- com字段来自Webservice，只保留ngModel绑定，删除内部的{{com}}插值 -->
    <ion-textarea [(ngModel)]="editcom"></ion-textarea>&nbsp;
  </ion-item>  
  <ion-button color="danger" (click)="editForm()" expand="block">OK</ion-button>
</ion-list>

2. 调整Webservice请求的回调逻辑，拿到数据后直接给绑定字段this.editcom赋值：

let promise = this.http.get(WMS_Webservice_URL).toPromise();
await promise
.then((data)=>{
  const com = data['features'][0]['properties']['com'];
  // 给ngModel绑定的字段赋值，初始值会自动渲染到输入框
  this.editcom = com;
  // 如果其他业务逻辑需要用到this.com，可以保留这行赋值
  this.com = com;
})
.catch((error)=>{
  this.editcom = '';
  this.com = '';
});

补充检查项 #

如果修改后还是无法编辑，确认你当前业务模块的imports数组中已经导入了FormsModule，只有导入该模块后[(ngModel)]双向绑定才能正常生效。

内容的提问来源于stack exchange，提问作者Julien