Angular点击模态框选行后输入框显示[Object Object]如何解决

• 直接将myDTO类型的完整对象通过字符串插值{{transactionCode}}绑定到输入框的ngModel上，Angular执行插值渲染时，会对对象这类非原始值自动调用toString()方法，对象默认的toString()返回结果就是[object Object]，这是文本框显示异常的直接原因。
• 模板中同时使用了响应式表单指令formControlName="Example"和模板驱动表单指令ngModel，属于Angular表单的冲突写法，会直接导致值绑定逻辑混乱，不符合框架使用规范。
• 输入框本身仅支持绑定字符串、数字这类原始类型值，无法直接渲染完整对象结构。

1. 服务层和选中行的传值逻辑无需调整，服务中存储完整myDTO对象的写法是合理的，需要传递完整对象给其他组件时，直接在对应组件TS中读取服务内的transactionCode对象即可，不需要通过输入框承载对象传递。
2. 修正表单绑定冲突问题，根据你使用的表单模式二选一调整：
   • 若使用响应式表单（保留formControlName）：
     移除模板中错误的ngModel插值绑定，选中行后给表单控件赋值时，取myDTO中你需要在输入框展示的具体字段（比如单据编码、名称这类业务字段，替换为你实际的字段名即可）。
     修正后的数据接收组件TS代码示例：

     // 假设你的表单组名为exampleForm，需要展示的字段为bizCode（myDTO内的业务编码字段，替换为实际字段名）
     ngAfterViewInit() {
       const selectedData = this.transactionService.transactionCode;
       if (selectedData) {
         this.exampleForm.get('Example')?.setValue(selectedData.bizCode);
       }
     }
     
     get transactionCode(): myDTO {
       return this.transactionService.transactionCode;
     }
     

     修正后模板代码：

     <td>
       <input style="width:200px" class="form-control" formControlName="Example">
     </td>
     

   • 若使用模板驱动表单（保留ngModel）：
     移除formControlName指令，ngModel直接绑定myDTO中需要展示的具体字段，不要绑定完整对象。
     修正后模板代码：

     <td>
       <input style="width:200px" class="form-control" [(ngModel)]="transactionCode.bizCode" name="exampleInput">
     </td>
     

3. 如果需要在模态框关闭后实时同步选中值，可以在接收组件中订阅模态框关闭事件，触发时重新读取服务中的值并更新表单控件即可。

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