欢迎来到雄杰鑫电商资讯网
技术教程

Angular 表单中下拉框未正确显示默认值的解决方案

心靈之曲 次阅读

angular 模板中多个 `

在 Angular 基于模板驱动表单（Template-driven Forms）的场景中，

内每个带 ngModel 的表单控件（如 ）必须拥有全局唯一的 name 属性。否则，Angular 会将所有同名控件视为同一个逻辑表单控件，导致模型绑定混乱——后渲染的控件会覆盖先渲染控件的 ngModel 绑定值，最终仅最后一个下拉框能正确显示默认选中项。

你代码中的关键问题在于：

 动态生成唯一 name，推荐结合索引或 ID：

  
    
      
    
  

⚠️ 注意事项：


    

  • 不要使用静态字符串（如 name="ddd"）作为循环内表单控件的名称；
    • 

  • 若需在 TS 中访问特定控件，可配合模板引用变量（如 #selectCtrl="ngModel"）或通过 @ViewChildren(NgModel) 查询；
    • 

  • 确保 selectedValue 初始值严格等于 options 数组中某个对象引用（[ngValue] 绑定依赖对象引用相等性），你当前赋值 this.members[0].selectedValue = this.members[0].options[1]; 是正确的；
    • 

  • 如无需表单提交/验证能力，可直接移除 
     标签（正如你测试所见），此时 ngModel 退化为纯双向绑定，不再受 name 冲突影响——但这会失去 Angular 表单的校验、状态管理等能力。
    

    • 



? 总结：模板驱动表单的健壮性始于唯一标识。始终为循环生成的 ngModel 控件分配动态且唯一的 name，是避免此类“默认值丢失”问题的根本准则。








            
 ai 多个 对象 绑定 可直接 循环 字符串 this 表单 select 会将 此类 dom input angular 表单提交 所见 下拉框 这会 如你

相关文章

按ESC键退出。