Angular 6下拉框如何将第一个选项设置为默认值？

要让下拉框默认显示第一个选项（sadique），核心是利用你已经用到的**双向绑定ngModel**来设置默认值，只需要在组件代码中把绑定的变量初始化为选项数组的第一个元素对应的字段值即可，具体步骤如下：

步骤1：在组件中设置默认值 #

在组件的ngOnInit生命周期钩子（或者数据加载完成的时机），将addRequisitionss.requestPerson赋值为RequestPerson数组第一个元素的requestedPerson属性。如果你的人员列表是异步加载的（比如从接口获取），要确保在数据返回后再执行赋值操作：

import { Component, OnInit } from '@angular/core';

@Component({
  // 你的组件元数据（selector、templateUrl等）
})
export class YourComponent implements OnInit {
  addRequisitionss: any = {}; // 确保这个对象已初始化，避免undefined报错
  RequestPerson: any[] = []; // 存储人员列表的数组

  ngOnInit(): void {
    // 情况1：如果是本地静态数据
    this.RequestPerson = [
      { requestedPerson: 'sadique' },
      // 其他人员项...
    ];
    if (this.RequestPerson.length > 0) {
      this.addRequisitionss.requestPerson = this.RequestPerson[0].requestedPerson;
    }

    // 情况2：如果是异步接口获取数据
    // this.yourDataService.getRequestPersons().subscribe(data => {
    //   this.RequestPerson = data;
    //   if (this.RequestPerson.length > 0) {
    //     this.addRequisitionss.requestPerson = this.RequestPerson[0].requestedPerson;
    //   }
    // });
  }
}

步骤2：优化模板的选项绑定（可选但推荐） #

建议给<option>显式添加[value]属性，明确绑定选项的值，这样ngModel的双向绑定逻辑会更清晰（Angular默认会用显示文本作为选项值，但显式绑定更符合规范）：

<select class="form-control" id="requestPerson" [(ngModel)]="addRequisitionss.requestPerson" name="requestPerson" #workType="ngModel" required >
  <option *ngFor="let person of RequestPerson" [value]="person.requestedPerson">
    {{person.requestedPerson}}
  </option>
</select>

注意事项 #

• 一定要检查RequestPerson数组是否为空，避免出现Cannot read property 'requestedPerson' of undefined的报错；
• 如果是异步加载数据，必须在数据返回的回调中设置默认值，否则数组还未初始化时赋值会无效。

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