在 Angular 中，将布尔类型的 JSON 数据（如 true/false）双向绑定到 下拉框时，需注意字符串值与布尔值的类型匹配问题；直接使用 value="true" 会导致绑定失败，应通过 [ngValue] 或类型转换确保一致性。

在 angular 中，将布尔类型的 json 数据（如 `true`/`false`）双向绑定到 `` 下拉框时，需注意字符串值与布尔值的类型匹配问题；直接使用 `value="true"` 会导致绑定失败，应通过 `[ngvalue]` 或类型转换确保一致性。

在 Angular 模板中使用 [(ngModel)] 绑定布尔值到 <select></select> 时，不能直接用 value="true" 或 value="false"——因为 HTML 的 value 属性始终是字符串，而你的模型属性 reportInfo.active 是布尔类型（true/false）。当用户选择时，ngModel 会尝试将字符串 "true" 赋值给布尔变量，导致类型不匹配："true" == true 为 false，最终视图与模型不同步，下拉框无法正确回显。

✅ 正确做法是使用 [ngValue]（而非 value），它支持绑定任意类型（包括布尔值）：

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

此时，<option></option> 会将 JavaScript 布尔值 true 作为选项的实际值，ngModel 可精准比对并同步状态。

⚠️ 注意事项：

• 确保已导入 FormsModule（用于 ngModel）；
• 若使用响应式表单（FormControl），推荐改用 formControlName + compareWith 或预处理数据；
• 避免在模板中做类型转换（如 +value 或 value === 'true'），易引发不可靠行为；
• JSON 中的原始布尔字段（如 "active": true）可直接赋值给组件属性，无需字符串化。

完整可运行示例（Angular 16+ 独立组件）：

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-report-status',
  standalone: true,
  imports: [FormsModule],
  template: `
    <select 
      name="reportNo" 
      class="form-select" 
      [(ngModel)]="reportInfo.active">
      <option [ngValue]="true">Activated</option>
      <option [ngValue]="false">Deactivated</option>
    </select>
    <div>当前状态：{{ reportInfo.active ? '已启用' : '已停用' }}</div>
  `,
})
export class ReportStatusComponent {
  reportInfo = {
    active: true, // 来自后端 JSON 的布尔值，保持原生类型
  };
}

总结：绑定布尔值到下拉框的核心在于语义一致性——用 [ngValue] 保留类型，避免隐式字符串转换。这不仅解决选中态回显问题，也保障了表单提交时的数据准确性与可维护性。