在使用 Angular 开发 Web 应用程序时，我们通常会使用表单元素来收集用户输入。其中一个常见的表单元素是选择框，它可以让用户从预定义的选项中选择一个或多个值。在某些情况下，我们需要将布尔值绑定到选择框，例如启用/禁用开关。本文将深入介绍如何在 Angular 中使用选择框来绑定布尔值。
基本示例
让我们从一个基本的示例开始。我们将创建一个选择框，其中包含两个选项：是和否。当用户选择“是”时，我们将通过绑定的变量 isEnable 将布尔值 true 分配给选择框。如果用户选择“否”，则分配 false。
<select [(ngModel)]="isEnable"> <option value="true">是</option> <option value="false">否</option> </select>
在组件类中，我们需要声明 isEnable 变量并将其初始化为布尔值 false。
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------------ --------- -------------- ------------ -------------------------- -- ------ ----- ---------------- - -------- - ------ -
现在，我们已经成功地创建了一个选择框，并且可以将用户的选择绑定到一个布尔变量上。
双向绑定
在 Angular 中，我们可以使用双向绑定来使组件和模板之间的数据同步。对于选择框，我们可以使用 [(ngModel)] 指令来实现双向绑定。
<select [(ngModel)]="isEnable"> <option value="true">是</option> <option value="false">否</option> </select>
当用户选择一个选项时，[(ngModel)] 指令将自动更新组件类中的 isEnable 变量，并且如果在组件类中更改了 isEnable 变量的值，则选择框中的选项也会相应地更新。
使用 ngValue
在上面的示例中，我们将布尔值作为字符串 true 和 false 的值分配给选项的 value 属性。这种方法有一个缺点，那就是它将布尔值强制转换为字符串，而且还需要进行类型转换才能在组件类中使用。为了解决这个问题，我们可以使用 ngValue 指令来绑定布尔值。
<select [(ngModel)]="isEnable"> <option [ngValue]="true">是</option> <option [ngValue]="false">否</option> </select>
现在，ngValue 指令将原始的布尔值直接绑定到选项的 value 属性，而不需要进行类型转换。我们可以直接在组件类中使用布尔变量而无需进行任何类型转换。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- --------------
------------ --------------------------
--
------ ----- ---------------- -
-------- - ------
-------------- -
------------- - ---------------
-
-使用 ngModelChange
默认情况下，当用户选择一个选项时，[(ngModel)] 指令会自动更新组件类中的绑定变量。但是，在某些情况下，我们可能需要在用户更改选项之前执行一些操作。例如，在提交表单之前验证输入数据。
为了在用户更改选项之前执行操作，我们可以使用 ngModelChange 事件。该事件会在选择框中的值发生更改时触发，并将新的值传递给组件类中的处理函数。
<select [ngModel]="isEnable" (ngModelChange)="onEnableChange($event)"> <option [ngValue]="true"> > 来源：[JavaScript中文网](https://www.javascriptcn.com/post/25345) ，转载请注明来源 [https://www.javascriptcn.com/post/25345](https://www.javascriptcn.com/post/25345)