Angular中更新分支信息时如何设置下拉菜单选中值？

嘿，你已经做了不少基础工作了，不过下拉框没自动选中大概率是值类型不匹配或者数据加载时机的问题，我帮你梳理下具体的解决步骤：

1. 先检查值的类型是否匹配 #

你用patchValue设置了school_id: branch.school_id，但要注意：下拉选项的[value]绑定的是school.id，如果school.id是数字类型，而branch.school_id是字符串类型（或者反过来），Angular就没法匹配上，自然不会自动选中。

解决办法是统一类型，比如把branch.school_id转成和school.id一致的类型：

this.editForm.patchValue({
  name: branch.name,
  name_ar: branch.name_ar,
  address: branch.address,
  address_ar: branch.address_ar,
  number: branch.number,
  email: branch.email,
  description: branch.description,
  school_id: Number(branch.school_id) // 如果school.id是数字就转成数字，是字符串就用String()
});

2. 把[value]换成[ngValue]试试 #

原生select的[value]只能绑定字符串，如果你school.id是数字或者其他类型，用[ngValue]会更可靠，它支持绑定任意类型的值，能确保和表单控件的值完全匹配：

<option ngbDropdownItem *ngFor="let school of schoolsFromSchoolComponent" [ngValue]="school.id">
  {{ school.name }}
</option>

3. 确保学校列表数据已经加载完成 #

如果打开模态框的时候，schoolsFromSchoolComponent还没从后端拿到数据，那就算你patchValue了school_id，下拉选项还没渲染出来，等数据加载完也不会自动选中。

你可以要么在打开模态框前确保学校数据已经加载好，要么在数据加载完成后再执行patchValue：

// 假设你有获取学校列表的方法
this.schoolService.getSchools().subscribe(schools => {
  this.schoolsFromSchoolComponent = schools;
  // 数据加载完成后再给表单赋值
  this.editForm.patchValue({
    // ...其他字段
    school_id: branch.school_id
  });
});

4. 重置表单提交状态 #

你的HTML里用了isBranchFormSubmitted来判断错误状态，记得打开模态框的时候把这个变量重置为false，避免之前的提交状态影响下拉框的选中逻辑：

openVerticalCenteredModal(content: TemplateRef<any>, branch: any) {
  this.isBranchFormSubmitted = false; // 重置提交状态
  this.modalService.open(content, {centered: true}).result.then((result) => {
    console.log("Modal closed" + result);
  }).catch((res) => {});
  
  this.editForm.patchValue({
    // ...你的字段赋值
  });
}

小提示：去掉冲突的ngbDropdown指令 #

你现在把原生select和ngbDropdown混在一起用了，这其实没必要——ngbDropdown是用来做自定义下拉菜单的，原生select本身就是下拉控件。如果不需要自定义样式，直接去掉ngbDropdown相关的标签和指令，代码会更简洁：

<div class="mb-3">
  <label for="selectSchool" class="form-label">The branch belongs to</label>
  <select class="btn btn-outline-info btn-lg"
    (change)="changeSchool($event)"
    formControlName="school_id" 
    [ngClass]="{'is-invalid': isBranchFormSubmitted && form2.school_id.errors}">
    <option *ngFor="let school of schoolsFromSchoolComponent" [ngValue]="school.id">
      {{ school.name }}
    </option>
  </select>
  <div *ngIf="isBranchFormSubmitted && form2.school_id.errors?.required" class="invalid-feedback">
    Required
  </div>
</div>

按照上面的步骤调整后，下拉框应该就能自动选中对应的学校了。

内容的提问来源于stack exchange，提问作者Besimin A.