Angular 2：获取多个选中复选框的值

typescript

Angular 2：获取多个选中复选框的值

在Angular 2中，复选框是一种常见的表单元素，用于让用户选择多个选项。当我们需要获取用户所选中的复选框的值时，我们可以通过一些简单的代码来实现。

在本文中，我们将学习如何在Angular 2中获取多个选中复选框的值，并且我们将通过一个实际的案例来演示。

案例：选择兴趣爱好

假设我们有一个表单，其中包含一组兴趣爱好的复选框。我们希望能够获取用户所选中的兴趣爱好，并将其显示在页面上。

首先，我们需要在组件类中创建一个数组来存储用户所选中的兴趣爱好。我们可以使用Angular的双向绑定来实现这一点。

typescript
export class InterestsComponent {
  interests: string[] = [];
}

接下来，在模板中，我们需要使用ngFor指令来循环遍历兴趣爱好的列表，并为每个复选框创建一个事件绑定。

html
<div *ngFor="let interest of interests">
  <input type="checkbox" [value]="interest" (change)="updateInterests($event.target.value, $event.target.checked)">
  {{ interest }}
</div>

在上面的代码中，我们使用了ngFor指令来遍历兴趣爱好的列表，并为每个复选框创建了一个事件绑定。当复选框的状态发生改变时，该事件绑定会调用updateInterests方法，并传递复选框的值和选中状态作为参数。

现在，我们需要在组件类中实现updateInterests方法来更新用户所选中的兴趣爱好数组。

typescript
updateInterests(interest: string, checked: boolean) {
  if (checked) {
    this.interests.push(interest);
  } else {
    const index = this.interests.indexOf(interest);
    this.interests.splice(index, 1);
  }
}

在上面的代码中，我们首先检查复选框的选中状态。如果复选框被选中，我们将兴趣爱好添加到数组中。如果复选框被取消选中，我们将从数组中删除该兴趣爱好。

最后，我们可以在页面中显示用户所选中的兴趣爱好数组。

html
<div>
  <strong>所选兴趣爱好：</strong>
  <span *ngIf="interests.length > 0">{{ interests.join(', ') }}</span>
  <span *ngIf="interests.length === 0">未选择</span>
</div>

在上面的代码中，我们使用了ngIf指令来根据数组的长度来显示不同的内容。如果用户选择了兴趣爱好，我们将显示所选兴趣爱好的列表，否则我们将显示"未选择"。

通过以上步骤，我们成功地实现了在Angular 2中获取多个选中复选框的值的功能。

在本文中，我们学习了如何在Angular 2中获取多个选中复选框的值。我们通过一个实际的案例演示了如何使用ngFor指令和事件绑定来实现这一功能。通过这种方式，我们可以轻松地获取用户所选中的复选框的值，并在页面上进行展示。

希望本文对大家有所帮助，谢谢阅读！