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

angular 模板中多个 `select` 元素若共用相同 `name` 属性，会导致表单将它们识别为同一控件，从而相互覆盖绑定值——这是默认值仅在最后一个下拉框生效的根本原因。

在 Angular 模板驱动表单（Template-Driven Forms）中，name 属性不仅用于 DOM 标识，更是 Angular 表单模型（NgModel）注册控件的关键依据。当多个 元素共享相同的 name="ddd" 时，Angular 会将它们视为同一个表单控件实例，而非独立的控件集合。因此，尽管你在 TypeScript 中为每个 currentChannel.selectedValue 正确赋值（如 this.members[0].selectedValue = this.members[0].options[1]），但表单内部仅维护一个名为 "ddd" 的控件状态，后续的绑定会不断覆盖前序值，最终只有最后一次绑定（即循环末尾的 members[1]）生效，造成“仅最后一个下拉框有默认选中”的假象。

✅ 解决方案：为每个 select 分配唯一 name

最直接、符合 Angular 表单规范的做法是：基于索引动态生成唯一 name 值。修改模板如下：

LLaMA-Factory Online

在线大模型训练与微调服务平台

下载

  

    

      
        #selectRef="ngModel"
      >
        
          {{ testFormat.val }}
        
      
    
  

⚠️ 注意事项：

• 不可使用插值语法 name="channelSelect_{{ch_index}}"，因为 name 是 DOM 属性而非指令输入；必须使用属性绑定 [name]。
• 若需在 TS 中访问特定控件状态（如验证），可配合模板引用变量（如 #selectRef="ngModel"）或通过 @ViewChildren(NgModel) 查询。
• 即使不提交表单，只要使用 ngForm 或 ngModel，就必须保证 name 唯一性——这是 Angular 表单机制的硬性要求。

? 额外建议：避免 any 类型，提升类型安全
将 members 定义为明确接口，例如：

interface Option { id: number; val: string; }
interface Channel { options: Option[]; selectedValue: Option | undefined; }

export class AppComponent implements OnInit {
  members: Channel[] = [];

  ngOnInit() {
    this.members.push({
      options: [{id: 1, val: 'ok'}, {id: 2, val: 'kk'}],
      selectedValue: {id: 2, val: 'kk'} // ✅ 直接初始化，无需分两步赋值
    });
    this.members.push({
      options: [{id: 1, val: 'ok'}, {id: 2, val: 'kk'}],
      selectedValue: {id: 2, val: 'kk'}
    });
  }
}

总结：Angular 模板驱动表单依赖 name 属性进行控件注册与状态映射。重复 name 是导致多控件绑定冲突的根源。通过动态生成唯一 name 并配合强类型定义，即可彻底解决默认值丢失问题，确保每个下拉框独立、可靠地响应双向绑定。