Angular 5中如何选择选项？下拉选择框绑定后值获取异常求助

这问题我之前做项目时也碰到过，核心原因是原生的(change)事件没办法正确读取用[ngValue]绑定的Country对象，再加上你同时用了双向绑定[(ngModel)]，其实可以换更顺畅的方式来获取选中值。下面给你两个可行的解决方案：

方案一：直接利用双向绑定的变量 #

既然已经通过[(ngModel)]="company.country"完成了双向绑定，选中值会自动同步到company.country里，完全不用从事件参数里取。

修改你的代码：

1. HTML部分，去掉(change)事件的参数：

<select [(ngModel)]="company.country" (change)="onSelectCountry()" style="width: 120px">
  <option *ngFor="let c of countries" [ngValue]="c">{{c.country.name}}</option>
</select>

2. TypeScript部分，直接读取this.company.country：

onSelectCountry() {
  this.selectedCountry = this.company.country;
  // 注意你的对象结构：原HTML显示的是c.country.name，所以要嵌套访问
  alert(this.selectedCountry?.country?.name);
}

这里加了?.可选链操作符，是为了防止selectedCountry为空时访问属性报错，建议保留。

方案二：使用Angular专属的(ngModelChange)事件 #

如果你习惯通过事件参数获取选中值，别用原生的(change)，改用Angular提供的(ngModelChange)，它会直接把绑定的对象作为参数返回，完美适配[ngValue]绑定的场景。

修改代码：

1. HTML部分替换事件：

<select [(ngModel)]="company.country" (ngModelChange)="onSelectCountry($event)" style="width: 120px">
  <option *ngFor="let c of countries" [ngValue]="c">{{c.country.name}}</option>
</select>

2. TypeScript部分接收对象参数：

onSelectCountry(selectedCountry: Country) {
  this.selectedCountry = selectedCountry;
  alert(selectedCountry?.country?.name);
}

额外检查点 #

最后再帮你排查几个可能踩坑的地方：

• 确保countries数组已经正确初始化，每个元素都是包含country.name属性的有效Country对象；
• 确认company.country的初始值要么是countries数组中的某一个对象，要么是null/undefined，避免因对象不匹配导致选中状态异常；
• 如果还是有问题，可以在模板里加个调试输出，比如{{company.country | json}}，看看选中后的值到底是什么。

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