Angular中如何为绑定对象数组的select设置默认选中值？

我有一个绑定对象集合的select组件，想要添加“Please select”作为默认值，但无法让它默认选中该选项。相关代码如下：

模板代码 #

<select [(ngModel)]="ingredient.definition" class="form-select" name="ingredient{{ i }}">
    <option value="" disabled selected>Please select</option>
    <option *ngFor="let definition of definitions" [ngValue]="definition" [disabled]="disableOption(definition)">{{ definition.name }}</option>
</select>

<button type="button" class="btn btn-primary d-block" [disabled]="disableAdd()" (click)="addIngredient()">Add ingredient</button>

Definition接口 #

export interface Definition {
  id: number;
  name: string;
  measurement: string;
  unit: string;
  measurementToUnit: number;
  unitPrice: number;
}

Ingredient接口 #

import { Definition } from './definition';

export interface Ingredient {
  quantity: number;
  definition: Definition;
}

动态添加逻辑 #

该select是动态添加的，添加时执行以下代码创建空对象：

addIngredient(): void {
    let ingredient: Ingredient = {
      quantity: 0,
      definition: {} as Definition
    }
    this.model.ingredients.push(ingredient);
}

原本以为空的definition对象会让select自动高亮默认选项，但并未生效。尝试创建虚拟Definition对象加入definitions集合也无效，请问正确实现方式是什么？

1. 修正初始值的类型匹配问题 #

当前ingredient.definition被初始化为{} as Definition，这是一个非空对象，和默认选项的value=""（字符串空值）类型不匹配，Angular无法将两者关联。需要把初始的definition设为null或undefined：

addIngredient(): void {
    let ingredient: Ingredient = {
      quantity: 0,
      definition: null // 或 undefined
    }
    this.model.ingredients.push(ingredient);
}

2. 调整模板中的默认选项配置 #

因为绑定的是对象类型（Definition），需要用[ngValue]而非value来匹配null值，同时保持disabled属性：

<select [(ngModel)]="ingredient.definition" class="form-select" name="ingredient{{ i }}">
    <option [ngValue]="null" disabled>Please select</option>
    <option *ngFor="let definition of definitions" [ngValue]="definition" [disabled]="disableOption(definition)">
        {{ definition.name }}
    </option>
</select>

为什么之前的方法无效？ #

• 空对象{} as Definition是一个实际存在的对象引用，和默认选项的字符串空值""类型不匹配，Angular无法匹配到对应选项。
• 虚拟Definition对象的方式需要确保ngModel绑定的是该虚拟对象的引用，否则无法选中，且会污染definitions集合，不是最优方案。

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