Angular中FormControl值视图不显示：Funcion字段赋值无展示

看起来你的问题出在Mat-Select的选项值绑定与表单设置的值不匹配上，我帮你梳理下可能的原因和对应的解决方案：

核心原因分析 #

你的Mat-Select里，mat-option的[value]绑定的是整个funcion对象：

<mat-option *ngFor="let funcion of funciones" [value]="funcion">{{funcion.Funcion}} </mat-option>

但你从后端拿到的convert.funcion，要么是字符串类型（比如仅功能名称），要么是和funciones数组里对象引用不一致的同结构对象——这两种情况都会导致Angular无法匹配到对应的选项，所以视图上就看不到选中值。

具体解决方案 #

情况1：后端返回的convert.funcion是字符串（功能名称） #

如果convert.funcion是类似"管理员"这样的字符串，那需要修改mat-option的[value]绑定为功能名称字段：

<mat-option *ngFor="let funcion of funciones" [value]="funcion.Funcion">{{funcion.Funcion}} </mat-option>

这样表单控件设置字符串值时，就能和选项的value匹配，视图会正常显示选中项。

情况2：后端返回的convert.funcion是完整的Funcion对象 #

这种情况下，因为Angular是通过对象引用来匹配选项的，即使两个对象属性完全一致，引用不同也不会被识别为同一个选项。你需要从funciones数组里找到和convert.funcion匹配的对象，再设置给表单控件：

// 建议用唯一ID匹配（如果有的话），比用名称更可靠
const matchedFuncion = this.funciones.find(f => f.id === convert.funcion.id);
// 如果没有ID，再用Funcion字段匹配
// const matchedFuncion = this.funciones.find(f => f.Funcion === convert.funcion.Funcion);

if (matchedFuncion) {
  this.registros.controls.funcion.setValue(matchedFuncion);
}

额外检查点 #

• 确保funciones数组在调用getRegistros()之前已经加载完成。如果funciones是从另一个接口获取的，建议合并请求（比如用forkJoin），等funciones加载完毕后再设置表单值。
• 在控制台打印this.funciones和convert.funcion，对比两者的结构和具体值，确认匹配逻辑是否正确。

内容的提问来源于stack exchange，提问作者Alberto A.M.