Angular4：下拉框默认选中首选项失效，寻求解决办法

嗨Andrea，我来帮你搞定这个问题！

你遇到的是Angular里很典型的绑定优先级问题：当你用[(ngModel)]做双向绑定时，手动添加的selected属性会被Angular的绑定逻辑直接覆盖，所以才会出现默认选项不生效的情况。下面是具体的解决方案：

核心原因 #

Angular会优先根据[(ngModel)]绑定的model.userSelected值来匹配对应的<option>，完全忽略你手动设置的selected属性。所以我们需要让绑定的模型值和默认选项的值保持一致，才能让默认选项被选中。

具体解决方案 #

1. 给默认选项设置明确值，同步初始化模型 #

首先修改你的模板，给默认提示选项添加value=""（因为它不需要绑定复杂对象）：

<select class="form-control" name="user" id="user" required [(ngModel)]="model.userSelected">
  <option value="">-- SELECT USER--</option>
  <option *ngFor="let user of users" [ngValue]="user">{{user.name}}</option>
</select>

然后在你的组件类中，初始化model.userSelected为空字符串或者undefined：

// 假设你的组件类里是这样定义model的
model = {
  userSelected: '' // 或者 userSelected: undefined
};

这样Angular就会自动匹配到值为空的默认选项，把它设为选中状态。

2. 处理异步加载用户列表的情况 #

如果你的users数组是通过API异步获取的（比如用HttpClient请求数据），还要注意模型初始化的时机：

• 确保在users数据加载完成后再设置model.userSelected的值
• 或者使用async pipe来处理异步数据，避免因数据未加载导致的匹配问题：

<select class="form-control" name="user" id="user" required [(ngModel)]="model.userSelected">
  <option value="">-- SELECT USER--</option>
  <option *ngFor="let user of users$ | async" [ngValue]="user">{{user.name}}</option>
</select>

这里的users$是一个Observable，你需要在组件中正确定义它（比如users$ = this.userService.getUsers()）。

额外提示 #

• 如果你希望默认选中用户列表中的某一个而非提示选项，只需要把model.userSelected初始化为users数组中的某一个对象即可（注意要引用数组里的原对象，不能是新建的对象）
• 因为你加了required属性，默认的提示选项（值为空）会在表单提交时触发验证，刚好符合必填项的需求

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