Angular编辑模态框开发：点击事件传值到input无法识别问题

两个关键错误导致值无法正常读取：

• 你通过modalRef["mascota"] = mascota给模态实例挂自定义属性的操作，完全无法把值传递到ng-template的渲染作用域里。当前场景下ng-template是内嵌在自身组件模板中的，渲染上下文默认就是当前组件类的实例，你把值存在了一个和组件类无关的modalRef对象上，模板自然找不到对应的mascota变量，最终报undefined。
• 输入框的绑定写法错误：原生属性value="mascota.name"会把引号里的内容当成纯静态文本渲染，不会解析成组件的变量取值。不加方括号的HTML属性永远是静态字符串，只有加了方括号的属性绑定，才会让Angular把内容当成表达式解析。

1. 组件类改造 #

在组件类中新增一个公开属性，用来存储当前选中要编辑的宠物对象，替代原来给modalRef挂属性的无效操作：

// 组件类内新增
currentEditMascota: any = null;

// 改造后的openSM方法
openSM(contenido, mascota) {
  // 直接将当前行的对象赋值给组件公开属性，模板可以直接访问
  this.currentEditMascota = mascota;
  // 正常打开模态即可
  const modalRef = this.modal.open(contenido, {size:'lg', centered:true});
}

2. 模态模板绑定改造 #

根据你的使用场景选择对应的绑定方式，替换原来的静态value写法：

• 仅需要把表格值回显到输入框：使用属性绑定，搭配可选链避免空值报错

<input 
  class="form-control" 
  type="text" 
  placeholder="Nombre" 
  [value]="currentEditMascota?.name" 
/>

• 需要支持编辑后同步值回组件（后续提交修改的场景）：使用双向绑定，记得提前在所属模块导入FormsModule

<input 
  class="form-control" 
  type="text" 
  placeholder="Nombre" 
  [(ngModel)]="currentEditMascota.name"
  name="editMascotaName"
/>

扩展说明 #

如果后续你把内嵌ng-template的模态拆成独立的模态组件，传值方式会有调整：需要通过模态实例的componentInstance属性给独立组件的输入属性赋值，比如modalRef.componentInstance.editedMascota = mascota。但当前内嵌ng-template的场景下，直接存组件属性是最简洁稳定的方案，后续其他表格字段（比如生日、物种名）都可以直接用相同的绑定方式，把值绑定到对应的表单项上即可。

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