angular 模板中多个 `select` 元素若共用相同 `name` 属性，会导致表单将它们识别为同一控件，从而相互覆盖绑定值——这是默认值仅在最后一个下拉框生效的根本原因。
在 Angular 模板驱动表单（Template-Driven Forms）中，name 属性不仅用于 DOM 标识，更是 Angular 表单模型（NgModel）注册控件的关键依据。当多个 <select> 元素共享相同的 name="ddd" 时，Angular 会将它们视为同一个表单控件实例，而非独立的控件集合。因此，尽管你在 TypeScript 中为每个 currentChannel.selectedValue 正确赋值（如 this.members[0].selectedValue = this.members[0].options[1]），但表单内部仅维护一个名为 "ddd" 的控件状态，后续的绑定会不断覆盖前序值，最终只有最后一次绑定（即循环末尾的 members[1]）生效，造成“仅最后一个下拉框有默认选中”的假象。
✅ 解决方案：为每个 select 分配唯一 name
最直接、符合 Angular 表单规范的做法是：基于索引动态生成唯一 name 值。修改模板如下：
<form #testScript="ngForm">
<div class="channel-container">
<div
class="channel"
*ngFor="let currentChannel of members; let ch_index = index"
>
<select
class="form-select"
[(ngModel)]="currentChannel.selectedValue"
[name]="'channelSelect_' + ch_index" <!-- ✅ 动态唯一 name -->
#selectRef="ngModel"
>
<option
*ngFor="let testFormat of currentChannel.options"
[ngValue]="testFormat"
>
{{ testFormat.val }}
</option>
</select>
</div>
</div>
</form>⚠️ 注意事项：
- 不可使用插值语法 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 并配合强类型定义，即可彻底解决默认值丢失问题，确保每个下拉框独立、可靠地响应双向绑定。
