爬取Angular应用时修改下拉选框无响应问题求助

当你用原生JS直接修改select的value或者设置option的selected属性时，Angular的ngModelChange或ngChange事件不会自动触发——因为Angular的变更检测和表单事件监听是基于自身的机制，原生DOM属性修改不会主动通知框架。

解决办法 #

方法1：手动触发change事件 #

修改DOM值之后，手动给select元素派发一个change事件，让Angular感知到变化：

// 修改value的情况
const select = document.querySelectorAll("select")[1];
select.value = 2;
select.dispatchEvent(new Event('change'));

// 设置option selected的情况
const option = document.querySelectorAll("select option")[2];
option.selected = true;
option.parentElement.dispatchEvent(new Event('change'));

方法2：使用Angular原生方式修改（推荐） #

如果是在组件内部操作，尽量避免原生DOM操作，直接修改绑定到[(ngModel)]的变量：
假设你的模板是：

<select [(ngModel)]="selectedValue" (ngModelChange)="onChange()">
  <option value="1">选项1</option>
  <option value="2">选项2</option>
</select>

在组件类里直接修改变量：

this.selectedValue = 2;

这样Angular会自动触发变更检测，同时执行ngModelChange绑定的回调函数。

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