Angular 17设置select默认选中Male失败，该如何解决？

核心问题分析 #

你的[(ngModel)]绑定的是registration.gender，但当前TS代码里registration只是通过类型断言创建的空对象，并没有初始化gender属性，导致绑定的字段无值，默认选中逻辑无法生效。

具体解决方案 #

方案1：初始化时直接给registration.gender赋值

修改TS中的registration对象初始化代码，直接设置gender默认值：

export class Registration implements OnInit {
  public patients = [] as Patient[];
  public patient = {} as Patient;
  // 直接初始化gender为'male'
  public registration: Registration = { gender: 'male' };

  ngOnInit(): void {
    // 其他初始化逻辑
  }
}

方案2：在生命周期钩子中赋值

如果Registration接口有其他必填字段，无法直接在对象初始化时赋值，可以在ngOnInit钩子中设置：

export class Registration implements OnInit {
  public patients = [] as Patient[];
  public patient = {} as Patient;
  public registration = {} as Registration;

  ngOnInit(): void {
    // 在OnInit中初始化gender
    this.registration.gender = 'male';
  }
}

注意：之前你注释掉的registration.gender = 'male';直接写在类属性定义外是语法错误，必须放在函数（如构造函数、ngOnInit）内部。

方案3：确保Registration接口定义正确

确认你的Registration接口包含gender属性，否则TypeScript会隐性阻止属性赋值：

interface Registration {
  gender?: string; // 可选属性，或者去掉?设为必填
  // 其他属性...
}

临时测试方案（不推荐）

如果以上方法仍有问题，可以临时在option上添加selected属性，但这不符合Angular数据驱动表单的最佳实践：

<select name="gender" id="gender" [(ngModel)]="registration.gender">
  <option value="male" selected>Male</option>
  <option value="female">Female</option>
  <option value="others">Others</option>
</select>

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