Angular表单初始化后，如何无DOM查询设置select默认选中第一项

现有Angular组件的HTML代码：

<div *ngIf="isProfessional" class="form-group d-flex flex-column ml-5" id="professionalType">
    <label class="mb-0">Professional Type</label>
    <select class="form-select" formControlName="professionalType">
        <option value="" disabled selected>Choose a type</option>
        <option *ngFor="let item of sortedProfessionalTypeCodesData" [ngValue]="item.code">
            {{ item.display }}
        </option>
    </select>
</div>

通过HTTP请求获取下拉框数据源的TypeScript代码：

this.scheduleApiService.getSchedules(userClinicLocation.id, this.scheduleForm.controls["professionalType"]?.value || undefined, "PROF")
  .subscribe((schedules: Schedule[]) => {
    this.professionalTypeCodes = schedules;
    this.sortedProfessionalTypeCodesData = professionalTypeCodes.sort((pt1, pt2) => pt1.display < pt2.display ? -1 : (pt1.display > pt2.display ? 1 : 0));
    // TODO - Select the first option
  })

需求：在异步获取并排序数据后，让下拉框默认选中第一个元素。限制条件：

• 表单已完成初始化，无法在表单构建阶段设置初始值
• 禁止使用DOM查询

直接利用Angular表单控件的setValue或patchValue方法赋值即可，在数据完成排序后执行以下操作：

修改后的TypeScript代码：

this.scheduleApiService.getSchedules(userClinicLocation.id, this.scheduleForm.controls["professionalType"]?.value || undefined, "PROF")
  .subscribe((schedules: Schedule[]) => {
    this.professionalTypeCodes = schedules;
    this.sortedProfessionalTypeCodesData = this.professionalTypeCodes.sort((pt1, pt2) => pt1.display < pt2.display ? -1 : (pt1.display > pt2.display ? 1 : 0));
    // 设置第一个选项为选中值
    if (this.sortedProfessionalTypeCodesData.length > 0) {
      // 方式1：针对单个控件赋值
      this.scheduleForm.controls["professionalType"].setValue(this.sortedProfessionalTypeCodesData[0].code);
      // 方式2：批量赋值（适合同时设置多个控件）
      // this.scheduleForm.patchValue({ professionalType: this.sortedProfessionalTypeCodesData[0].code });
    }
  })

注意事项：

• 先判断数组长度，避免空数组导致的报错
• 由于下拉框选项的[ngValue]绑定的是item.code，所以赋值时必须传入对应code字段值
• setValue和patchValue都能实现需求，根据场景选择即可

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