Angular 14动态Select选项无法正确匹配绑定值问题

问题情况 #

已正确配置角色和组的数组列表，迭代出的数据值无误，但Select组件始终显示配置数组的第一个选项；角色和组旁的ID已正确设置，下拉框却无法显示该ID对应的文本值。尝试添加[selected]属性匹配配置数组ID与组/角色列表ID，问题仍未解决。

相关代码 #

HTML代码

<div class="container">
  <div class="row" *ngFor="let item of configuracion; let i = index">
    <div class="col-lg-5" >
      <label for="nombre" class="col-form-label">grupo {{item.id_group}}</label>
      <select class="form-select" name="uno" [(ngModel)]="item.id_group">
        <option *ngFor="let objGrupo of lstGrupos" [value]="objGrupo.id">{{objGrupo.name}}</option>
      </select>
    </div>
    <div class="col-lg-5" >
      <label for="nombre" class="col-form-label">Rol {{item.id_role}} </label>
      <select class="form-select" name="dos" [(ngModel)]="item.id_role">
        <option *ngFor="let objeto of lstRoles" [value]="objeto.id">{{objeto.name}}</option>
      </select>
    </div>
    <div class="col-lg-2" style="display: flex; align-items: flex-end;">
      <button class="btn btn-rounded btn-danger"  type="button" >
        <i class="bi bi-trash-fill"></i>
        eliminar
      </button>
    </div>
  </div>
</div>

TypeScript代码

ngOnInit(): void {
  this.configuracion.push(
    {id:0, id_group: Number(101), id_perfil:0, id_role: Number(204)},
    {id:0, id_group: Number( 104), id_perfil:0, id_role: Number( 305)}
  )
}

尝试修改后的HTML片段

<div class="col-lg-5" >
  <label for="nombre" class="col-form-label">grupo {{item.id_group}}</label>
  <select class="form-select" name="uno" [(ngModel)]="item.id_group">
    <option *ngFor="let objGrupo of lstGrupos" [value]="objGrupo.id" [selected]="item.id_group==objGrupo.id">{{objGrupo.name}}</option>
  </select>
</div>

问题原因 #

1. [(ngModel)]与[selected]冲突：在Angular中，双向绑定[(ngModel)]会自动管理选中状态，手动添加[selected]会和ngModel的逻辑冲突，导致选中状态异常。
2. 数据类型不匹配：[value]属性会自动把绑定的值转换为字符串类型，如果item.id_group是数字类型（如代码中用Number()转换的），而lstGrupos里的objGrupo.id是字符串类型，类型不匹配会导致ngModel无法正确匹配选项。

解决方案 #

方案1：移除[selected]，统一数据类型 #

• 删除模板中的[selected]属性，完全依赖[(ngModel)]进行绑定。
• 确保item.id_group和objGrupo.id的数据类型一致：
  • 若objGrupo.id是数字，保持item.id_group为数字类型（当前代码的Number()转换即可）。
  • 若objGrupo.id是字符串，将item.id_group改为字符串类型：

    ngOnInit(): void {
      this.configuracion.push(
        {id:0, id_group: '101', id_perfil:0, id_role: '204'},
        {id:0, id_group: '104', id_perfil:0, id_role: '305'}
      )
    }
    

方案2：使用[ngValue]替代[value] #

[ngValue]可以保留数据的原始类型，不会自动转换为字符串，适合处理数字或复杂对象的绑定：

<!-- 组选择框修改 -->
<select class="form-select" name="uno" [(ngModel)]="item.id_group">
  <option *ngFor="let objGrupo of lstGrupos" [ngValue]="objGrupo.id">{{objGrupo.name}}</option>
</select>

<!-- 角色选择框修改 -->
<select class="form-select" name="dos" [(ngModel)]="item.id_role">
  <option *ngFor="let objeto of lstRoles" [ngValue]="objeto.id">{{objeto.name}}</option>
</select>

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