Angular编辑数据时如何实现下拉框绑定用户已保存的选中值

我来帮你搞定这个下拉框显示的问题！你遇到的核心问题主要有两个：option的value绑定错误，以及编辑时没有正确给表单控件赋值，咱们一步步来修正：

1. 修复下拉框选项的Value绑定 #

你当前的代码里，<option>的value是写死的字符串"mypersonName.id"，而不是绑定到mypersonName.id这个变量。Angular里要绑定动态值，需要用方括号[value]：

<div class="col-lg-6 col-md-8 d-flex"> 
  <select formControlName="personName"> 
    <!-- 把value改成[value]，绑定到mypersonName.id变量 -->
    <option *ngFor="let mypersonName of dataArray" [value]="mypersonName.id">{{mypersonName.personName}}</option> 
  </select> 
</div>

如果你的personName控件需要绑定整个对象（而不只是id），可以换成[ngValue]="mypersonName"，不过看你的需求，绑定id就足够了。

2. 编辑时为表单控件赋值 #

打开编辑对话框加载local_data的时候，你需要把local_data.id赋值给表单的personName控件，这样下拉框才会自动选中对应的选项。在组件的编辑方法里添加这段代码：

// 假设你的表单组是myForm，根据实际名称替换
this.myForm.patchValue({
  personName: local_data.id
});

// 或者用setValue（适合单个控件赋值）
// this.myForm.get('personName')?.setValue(local_data.id);

3. 额外检查点 #

• 确认dataArray中确实存在id等于local_data.id的项，如果没有的话，下拉框会默认选中第一个选项
• 确认你的表单控件personName已经正确初始化在表单组中，没有拼写错误
• 如果你的local_data.id是数字类型，确保dataArray里的id也是相同类型（避免类型不匹配导致无法匹配选项）

这样修改后，下拉框就能正确显示用户之前保存的选项啦！

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