Angular中在已绑定ngModel的select中设置默认选中项

你遇到的问题核心在于：Angular 中 [(ngModel)] 的优先级高于 [selected] 属性，当两者同时存在时，[selected] 会被框架忽略，所以直接设置该属性无法生效。正确的做法是通过控制绑定的 reqAggDipendente.id_Reparto 值来实现默认选中，以下是两种可行方案：

方案一：固定选中 ID 为 1 的选项 #

如果需求是默认选中 ID 为 1 的部门，直接在组件初始化逻辑中给绑定字段赋值即可：

组件代码示例 #

import { Component, OnInit } from '@angular/core';
import { Reparto } from './path-to-reparto-interface';
// 导入你的数据服务

@Component({
  // 组件元数据（如 selector、templateUrl 等）
})
export class YourComponent implements OnInit {
  reqAggDipendente: any = {}; // 根据实际业务定义类型
  tuttiReparti: Reparto[] = [];

  constructor(// 注入数据服务) {}

  ngOnInit(): void {
    // 先获取部门列表数据
    this.loadRepartiList();
    // 初始化默认选中 ID 为 1 的部门
    this.reqAggDipendente.id_Reparto = 1;
  }

  loadRepartiList(): void {
    // 调用服务获取部门列表的逻辑
    // 示例：this.repartoService.getReparti().subscribe(data => this.tuttiReparti = data);
  }
}

模板代码修改 #

删掉无效的 [selected] 属性，保持绑定逻辑即可：

<div class="col-12">
  <select id="inputReparto" class="form-select" name="id_reparto" [(ngModel)]="reqAggDipendente.id_Reparto">
      <option *ngFor="let reparto of tuttiReparti" [ngValue]="reparto.id">{{ reparto.nome }}</option>
  </select>
</div>

方案二：默认选中列表第一个选项 #

如果需求是不管部门 ID 是什么，默认选中列表的第一个选项，可以在获取到部门数据后，给绑定字段赋值第一个元素的 ID：

组件代码示例 #

ngOnInit(): void {
  this.loadRepartiList();
}

loadRepartiList(): void {
  this.repartoService.getReparti().subscribe(data => {
    this.tuttiReparti = data;
    // 确保数组不为空时，设置第一个元素为默认选中项
    if (this.tuttiReparti.length > 0) {
      this.reqAggDipendente.id_Reparto = this.tuttiReparti[0].id;
    }
  });
}

模板代码和方案一的修改一致，无需保留 [selected] 属性。

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