Angular中如何根据值动态显示select选项并正确回显选中值

你的代码有三个核心问题，导致下拉框无法正确显示选中值：

• 冗余DOM结构：写了两个功能完全一致的<select>元素，靠*ngIf条件切换渲染，不仅代码重复，用户切换选项后isVisible值变化会触发两个select的销毁/重建，直接导致选中状态丢失
• selected属性无效：在Angular的表单体系（不管是响应式表单还是模板驱动表单）中，select的选中状态完全由绑定的表单控件值决定，手动给option加selected属性会被框架的渲染逻辑覆盖，根本不会生效
• 值类型不匹配：原生value属性绑定的值是字符串类型，但你传入对象里的isVisible是数字类型的0/1，Angular做严格匹配时，字符串"1"和数字1不相等，匹配不到对应选项就会显示空白。

不需要写两个条件渲染的select，只需要保留一个select即可，注意用[ngValue]绑定数字类型的选项值，同时在初始化表单控件时把category.isVisible作为控件初始值传入，框架会自动匹配选中对应选项：

<div class="form-group">
  <label for="isVisible" class="label">Set Visibility</label>
  <select class="form-select" id="isVisible" formControlName="isVisible">
    <option [ngValue]="0">Hidden</option>
    <option [ngValue]="1">Visible</option>
  </select>
</div>

响应式表单初始化示例：

this.form = this.fb.group({
  isVisible: [this.category.isVisible] // 直接传入初始值即可，不需要模板额外判断
})

修复后不管isVisible初始值是0还是1，都会自动选中对应选项，也能正常切换两个选项值，不会出现状态异常。

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