Angular7中如何为下拉选择框设置默认选中项？

嘿，我来帮你搞定这个问题～首先得提一下你当前代码里的一个小误区：你的[(ngModel)]绑定的是整个employees数组，这其实不对，下拉框的双向绑定应该指向一个单独的变量，用来存储当前选中的选项值，而不是数据源本身。

接下来一步步修改就能实现默认选中Employee1的效果：

1. 在组件类中添加选中值变量 #

先在你的.ts文件里定义一个变量，用来保存选中的员工ID：

selectedEmployeeId: string; // 如果你的emp.id是数字类型，就改成number

2. 在获取员工数据后设置默认选中值 #

在ngOnInit的订阅回调里，等employees数组加载完成后，找到Employee1对应的ID赋值给selectedEmployeeId。这里有两种方式：

ngOnInit() {
  this.service.getEmployeenames().subscribe(actionArray => {
    this.employees = actionArray.map(item => {
      return { id: item.payload.doc.id, ...item.payload.doc.data() } as Employee;
    });
    
    // 方式1：如果Employee1是数组的第一个元素，直接取第一个的ID
    if (this.employees.length > 0) {
      this.selectedEmployeeId = this.employees[0].id;
    }
    
    // 方式2：如果你明确知道Employee1的ID（比如是'employee1-id'），直接赋值
    // this.selectedEmployeeId = 'employee1-id';
  });
}

3. 修正HTML中的ngModel绑定 #

把原来的[(ngModel)]="employees"改成绑定到我们刚定义的selectedEmployeeId：

<select name="employees" (change)="onEdit(emp)" [(ngModel)]="selectedEmployeeId" class="form-control">
  <option *ngFor="let emp of employees" [value]="emp.id"> {{emp.fullName}} </option>
</select>

小解释一下 #

• [(ngModel)]需要绑定到单个值，这个值要和你在option上设置的[value]类型一致（这里是emp.id）
• 必须等employees数组加载完成后再设置默认值，不然数组还没数据，找不到对应的ID，默认选中就不生效啦～

这样改完之后，组件加载完成拿到员工数据，下拉框就会自动默认选中Employee1啦！

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