Angular2，在多个复选框列表中获取复选框的值

基础概念

Angular 是一个用于构建客户端应用的开源平台，它基于 TypeScript 语言。Angular2 是 Angular 的第二个主要版本，引入了许多新特性和改进。复选框（Checkbox）是一种常见的用户界面元素，允许用户选择一个或多个选项。

类型

在 Angular 中，复选框通常与 [(ngModel)] 指令一起使用，以实现双向数据绑定。复选框的值可以是布尔值（true/false）或字符串。

应用场景

复选框常用于以下场景：

多选列表：允许用户从多个选项中选择一个或多个。
启用/禁用功能：通过复选框控制某个功能的启用或禁用状态。

示例代码

假设我们有一个复选框列表，用户可以选择多个选项，我们需要获取这些选项的值。

HTML 模板

<div *ngFor="let option of options; let i = index">
  <input type="checkbox" [(ngModel)]="selectedOptions[i]" [value]="option.value">
  {{ option.label }}
</div>
<button (click)="getSelectedValues()">Get Selected Values</button>

TypeScript 组件

import { Component } from '@angular/core';

@Component({
  selector: 'app-checkbox-list',
  templateUrl: './checkbox-list.component.html',
  styleUrls: ['./checkbox-list.component.css']
})
export class CheckboxListComponent {
  options = [
    { label: 'Option 1', value: '1' },
    { label: 'Option 2', value: '2' },
    { label: 'Option 3', value: '3' }
  ];
  selectedOptions: boolean[] = new Array(this.options.length).fill(false);

  getSelectedValues() {
    const selectedValues = this.options
      .filter((_, index) => this.selectedOptions[index])
      .map(option => option.value);
    console.log(selectedValues);
  }
}