Angular中使用ngModel绑定对象后无法访问其属性的问题

核心问题是你的<option>没有绑定正确的值，导致selectedProduct实际接收的是选项文本字符串而非Product对象，进而引发后续报错和UI异常。

问题原因 #

你当前的<option>只渲染了商品的名称和ID文本，但没有指定绑定的值。Angular默认会把选项的文本内容（比如"商品A, 1"）赋值给[(ngModel)]绑定的selectedProduct变量。虽然你声明它为Product类型，但实际存储的是字符串，这就导致：

• 访问selectedProduct.id时，字符串没有id属性，触发报错
• 报错会触发Angular变更检测异常，最终导致下拉框的*ngFor渲染失效，选项消失

解决方案 #

1. 用[ngValue]绑定完整的Product对象

[value]仅支持绑定字符串类型，要绑定复杂对象必须用[ngValue]：

<select name="select_product" [(ngModel)]="selectedProduct">
  <option [ngValue]="null">Choose a product!</option>
  <option *ngFor="let product of products" [ngValue]="product">
    {{product?.name}}, {{product?.id}}
  </option>
</select>

把原来的default替换为[ngValue]="null"，确保默认选中状态和变量初始值匹配。

2. 初始化selectedProduct为null

在组件中明确初始化变量，避免undefined带来的空值问题：

public selectedProduct: Product | null = null;

3. 访问属性时使用安全导航操作符

显示属性时加上?.，防止未选中商品时触发空值报错：

{{selectedProduct?.id}}
{{selectedProduct?.name}}

这样修改后，选中商品时selectedProduct会被赋值为对应的Product实例，访问属性不会报错，下拉框也能正常渲染所有选项。

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