在 Angular 2 中，我们可以使用 ngModel 指令来实现双向数据绑定。然而，在某些情况下，我们可能需要检测到 select 标签的值发生了改变，这就需要我们实时监测 ngModel 的变化并进行相应的处理。本文将详细介绍如何检测 ngModel 在 select 标签上的改变，并提供示例代码。
监测 ngModel 改变的方法
方法一：使用 (ngModelChange) 事件
Angular 2 提供了 (ngModelChange) 事件，该事件会在 ngModel 发生改变时触发。因此，我们可以在 select 标签上添加 (ngModelChange) 事件，从而捕获 ngModel 的变化并进行相应的处理。示例代码如下：
<select [(ngModel)]="selectedValue" (ngModelChange)="onSelectChange()"> <option value="1">选项一</option> <option value="2">选项二</option> <option value="3">选项三</option> </select>
在上述代码中，我们使用了 [(ngModel)] 来实现双向数据绑定，并在 select 标签上添加了 (ngModelChange) 事件来捕获 ngModel 的变化。当用户选择一个新的选项时，onSelectChange() 方法会被触发。我们可以在该方法中进行相应的处理，例如向后台发送请求、更新页面等。
方法二：使用 ngModelChange 指令
除了 (ngModelChange) 事件外，Angular 2 还提供了 ngModelChange 指令，该指令同样可以用于监测 ngModel 的变化。与 (ngModelChange) 事件不同的是，ngModelChange 指令适用于任何实现了 ControlValueAccessor 接口的组件，而不仅仅是 select 标签。
示例代码如下：
<select [(ngModel)]="selectedValue" ngModelChange="onSelectChange()"> <option value="1">选项一</option> <option value="2">选项二</option> <option value="3">选项三</option> </select>
在上述代码中，我们同样使用了 [(ngModel)] 来实现双向数据绑定，并使用了 ngModelChange 指令来捕获 ngModel 的变化。当用户选择一个新的选项时，onSelectChange() 方法会被触发。
示例代码
下面是一个完整的示例代码，其中包含了基于 (ngModelChange) 事件的方法和基于 ngModelChange 指令的方法：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -------------
--------- -
----------------
------- --------------------------- -----------------------------------
------- ----------------------
------- ----------------------
------- ----------------------
---------
--------------
----- ------------ ------
-
--
------ ----- --------------- -
-------------- -------
------------- -------
---------------- -
------ -------------------- -
---- ----
----------------- - ------
------
---- ----
----------------- - ------
------
---- ----
----------------- - ------
------
--------
----------------- - ---
------
-
-
-结语
本文介绍了在 Angular 2 中如何监测 select 标签上的 ngModel 变化，并提供了两种实
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/25444