Angular11+Ionic编辑表单对话框选中值未在UI层预填充问题

问题根因 #

导致编辑模式下拉选项无法回显的核心原因有两个：

1. 类型不匹配：自定义app-input组件内的ion-select-option使用了插值语法绑定value，插值会自动把所有值转为字符串类型，而你表单中存储的CarSeatTypeId是数字类型，两者类型不同导致ion-select无法识别到匹配的选中项。
2. 自定义表单控件适配问题：app-input组件同时绑定了[(ngModel)]和[value]存在冲突，且没有正确实现ControlValueAccessor接口，导致外部响应式表单的状态无法正确同步到内部的ion-select组件。

解决方案 #

按以下步骤修改即可解决回显问题：

第一步：修复ion-select-option的value绑定 #

修改app-input组件的模板代码，将插值语法改为属性绑定，保留值的原始类型：

<!-- 修改前 -->
<ion-select-option *ngFor="let item of selectItems" value="{{item[dataValue]}}">{{item[textValue]}}</ion-select-option>

<!-- 修改后 -->
<ion-select-option *ngFor="let item of selectItems" [value]="item[dataValue]">{{item[textValue]}}</ion-select-option>

第二步：添加类型兼容的比对函数（可选但推荐） #

在app-input组件的TypeScript代码中添加如下compareWith实现，兼容可能出现的类型差异场景：

compareWith = (val1: any, val2: any) => {
  return String(val1) === String(val2);
}

模板中已经绑定了[compareWith]="compareWith"，无需额外修改模板。

第三步：修复自定义控件的表单同步逻辑（可选，长期方案） #

如果你的app-input是通用表单控件，建议完整实现ControlValueAccessor接口，让组件可以完美适配Angular的响应式表单和模板表单，避免后续出现其他值同步问题。

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