Angular响应式表单：修复弹窗Select更新后默认选项空白问题

你的下拉框在更新弹窗打开时显示空白，主要由以下几个问题导致，逐一修复即可：

1. 模板循环变量名笔误 #

模板中*ngFor的循环变量是indianDish，但绑定[ngValue]时错误使用了未定义的dish，导致选项值绑定失败。

修复后的模板代码：

<div class="mb-3">
    <label class="control-label requiredField">
        {{ 'Select Food dishes:' | translate }}
        <span class="asteriskField"> *</span>
    </label>
    <select id="foodDishes" formControlName="foodDishes" class="form-control">
        <option value="" disabled>Select Option</option>
        <option *ngFor="let indianDish of dishes" [ngValue]="indianDish">
            {{ indianDish.name }} ({{indianDish.id }})
        </option>
    </select>
</div>

注：移除了多余的[selected]属性，Angular表单会自动管理选中状态

2. 异步数据加载时机问题 #

getAllFoodDishesDetails是异步请求，ngOnInit中直接赋值selectForUpdate时，菜品数据可能还未加载完成，导致patchValue时表单控件无法匹配到对应的选项。

修复component.ts中的代码：

ngOnInit() {
    // 为下拉选择框加载菜品选项
    this.dishesService.getAllFoodDishesDetails().subscribe((dishes ) => {
        this.dishes = dishes;
        // 等待菜品数据加载完成后，再获取待更新数据
        this.selectForUpdate = this.dishesService.getCurrentFoodDetails();
    });
}

3. 表单控件初始值类型不匹配 #

foodDishes是对象类型，初始值设置为空字符串''会导致类型不匹配，Angular无法正确匹配选项。

修复表单初始化代码：

constructor(){
    this.updateFoodDishesForm = new UntypedFormGroup({
        // 后端的Food dishes对象包含id、name等字段
        foodDishes: new UntypedFormControl(null) // 改为null或undefined
    });
}

4. 对象引用不匹配（可选） #

如果selectForUpdate.foodDishes是从后端新获取的对象，和dishes数组中的对象引用不同，Angular的下拉框无法通过引用匹配选中项。此时需要添加compareWith函数来指定比较规则：

模板中添加compareWith：

<select id="foodDishes" formControlName="foodDishes" class="form-control" [compareWith]="compareFn">

component.ts中定义比较函数：

compareFn(dish1: any, dish2: any): boolean {
    return dish1 && dish2 ? dish1.id === dish2.id : dish1 === dish2;
}

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