Angular 16中如何根据JSON布尔值绑定下拉选择框选中状态

你当前的核心问题是类型不匹配：[(ngModel)]绑定的是布尔类型的true/false，但<option>的value属性默认是字符串类型的"true"/"false"，两者无法直接匹配，导致下拉框无法自动选中对应选项。

最优解决方案：使用[ngValue]绑定布尔值 #

直接用[ngValue]替代value属性，让选项的值成为真正的布尔类型，和reportInfo.active的类型完全一致，就能实现自动选中：

<select name="reportNo" id="reportNo" class="form-select" [(ngModel)]="reportInfo.active">
  <option [ngValue]="true"> Activated </option>
  <option [ngValue]="false"> Deactivated </option>
</select>

原理说明 #

• value属性只能绑定字符串类型的值，而[ngValue]支持绑定任意类型的数据（包括布尔、对象等）
• 当reportInfo.active为布尔true时，会自动匹配[ngValue]="true"的选项；为false时匹配[ngValue]="false"的选项，完美符合你的需求。

备选方案（不推荐） #

如果一定要保留value属性，你需要在组件中将布尔类型的active转换为字符串类型，或者使用(change)事件手动同步，但这种方法多了额外的转换步骤，不如[ngValue]简洁：

比如在组件中处理：

// 组件.ts文件
get activeStr(): string {
  return this.reportInfo.active.toString();
}

set activeStr(value: string) {
  this.reportInfo.active = value === 'true';
}

然后HTML中绑定：

<select name="reportNo" id="reportNo" class="form-select" [(ngModel)]="activeStr">
  <option value="true"> Activated </option>
  <option value="false"> Deactivated </option>
</select>

显然第一种方案更直接高效，推荐使用。

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