Angular 5中select标签的(change)事件未触发browse函数问题

我来帮你一步步排查这个Angular下拉框change事件没触发的问题，既然你说控制台没有报错，那我们重点看一些容易忽略的配置细节：

1. 换用ngModelChange替代原生change事件 #

当你在select上使用ngModel时，Angular提供的ngModelChange事件比原生change更可靠，它会在ngModel绑定的值发生变化时精准触发。试试把模板里的事件绑定改成这样：

<form #selectform="ngForm">
  <select id="cityselect" class="mt-3 text-white" autofocus 
          (ngModelChange)="browse()" name="cityselect" ngModel>
    <option value="" selected>Select Your City</option>
    <option *ngFor="let city of cities" [value]="city.city">{{city.city}}</option>
  </select>
</form>

2. 确认ViewChild的引用时机 #

你用@ViewChild('selectform')获取表单实例，但如果组件初始化时还没渲染表单，这个引用可能会是undefined，虽然这不会直接导致change事件不触发，但会影响你后续获取表单值的逻辑。可以给ViewChild加上{ static: true }参数（Angular 8+版本适用），确保在ngOnInit阶段就能拿到实例：

@ViewChild('selectform', { static: true }) selectform: NgForm;

另外，你可以在ngOnInit里打印一下这个实例，验证是否能正常获取：

ngOnInit(): void {
  console.log('表单实例:', this.selectform);
}

3. 检查Router是否正确注入 #

你的browse()函数里用到了this.router.navigate，但代码里没有显示注入Router服务。虽然这不是事件不触发的直接原因，但如果没注入，后续执行到这一步会报错（可能你还没走到那步）。记得在组件构造函数里注入Router：

import { Router } from '@angular/router';

// ...

constructor(private router: Router) { }

4. 排除其他干扰因素 #

如果上面的调整都没用，建议先写一个极简版的测试代码，排除其他变量的影响：

<!-- 极简测试模板 -->
<select (change)="testTrigger()">
  <option value="">选择城市</option>
  <option value="Beijing">北京</option>
  <option value="Shanghai">上海</option>
</select>

// 测试函数
testTrigger() {
  console.log('Change事件触发了！');
}

如果这个极简版能正常触发，那说明你的原代码里可能有其他问题：比如cities数组是否正确加载？有没有可能下拉框的选项根本没渲染出来？或者CSS类导致下拉框元素不可交互？可以检查一下页面上的下拉框是否能正常点击展开选项。

5. 检查控制台的隐藏错误 #

有时候浏览器控制台的错误会被过滤，建议打开开发者工具的Console标签，取消所有过滤选项，仔细查看是否有细微的错误提示（比如模板解析警告、依赖注入错误等）。

按照这些步骤排查，应该能找到问题所在。最常见的原因就是原生change事件和ngModel的兼容性问题，换成ngModelChange通常就能解决。

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