Angular 4 select组件选中值问题求助（附代码）

根据你提供的代码片段，我整理了几个最可能导致select选中值异常的原因和对应的解决方案：

1. 对象引用不匹配（最常见） #

当你用[ngValue]绑定对象时，Angular会通过对象引用来判断选中项。如果organization.organizationType的引用和organizationTypes数组里的某个对象引用不一致（比如是后端返回的新对象，或者手动创建的副本），即使属性完全相同，select也不会识别为选中状态。

解决方案：
初始化organization.organizationType时，从organizationTypes数组中找到匹配的对象，而不是直接赋值一个新对象：

// 在组件的ngOnInit或数据加载完成后
this.organization.organizationType = this.organizationTypes.find(type => 
  type.id === this.organization.organizationTypeId // 假设用id作为匹配标识
);

2. 初始值未正确设置 #

如果organization.organizationType初始值不是null也不是organizationTypes中的有效对象，select会默认选中空值或者不选中任何项。

解决方案：

• 如果默认要显示"Choose type"，确保organization.organizationType初始化为null
• 如果需要默认选中某个类型，按上面的方法从数组中匹配赋值

3. 确认*ngFor循环的写法正确 #

从你截断的代码来看，循环部分应该是遍历organizationTypes生成option，要确保[ngValue]绑定的是数组中的每一项对象：

<option *ngFor="let type of organizationTypes" [ngValue]="type">
  {{ type.name }} <!-- 替换成你实际要显示的类型名称字段 -->
</option>

4. 表单控件的name属性建议优化 #

你的select的name是searchOrgType，和业务绑定的organization.organizationType关联性不强，还可能和页面其他同名控件冲突，建议改成更贴合业务的名称，比如organizationType：

<select [(ngModel)]="organization.organizationType" class="form-control" 
        id="organizationType" name="organizationType" #orgType="ngModel">

5. 异步数据加载时机问题 #

如果organizationTypes是通过API异步获取的，而organization.organizationType在数据加载完成前就赋值了，此时数组为空，无法匹配对象引用。

解决方案：
在organizationTypes加载完成后再初始化选中项，比如在订阅回调中处理：

this.organizationTypeService.getOrganizationTypes().subscribe(types => {
  this.organizationTypes = types;
  // 数据加载完成后再匹配选中项
  this.organization.organizationType = types.find(t => t.id === this.organization.organizationTypeId);
});

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