如何以angular 9反应形式获取foreach中每个复选框的值

在Angular 9中，可以使用反应式表单来获取foreach中每个复选框的值。以下是一个示例代码：

首先，在组件的HTML模板中，使用ngFor指令来遍历复选框列表，并使用formControlName绑定每个复选框的值到一个FormControl对象：

<form [formGroup]="myForm">
  <div *ngFor="let checkbox of checkboxes">
    <label>
      <input type="checkbox" [formControlName]="checkbox.value">
      {{ checkbox.label }}
    </label>
  </div>
</form>

接下来，在组件的TypeScript代码中，创建一个FormGroup对象，并初始化复选框的FormControl对象：

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent implements OnInit {
  myForm: FormGroup;
  checkboxes = [
    { label: 'Checkbox 1', value: 'checkbox1' },
    { label: 'Checkbox 2', value: 'checkbox2' },
    { label: 'Checkbox 3', value: 'checkbox3' }
  ];

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.myForm = this.formBuilder.group({});
    this.checkboxes.forEach(checkbox => {
      this.myForm.addControl(checkbox.value, this.formBuilder.control(false));
    });
  }
}

在上述代码中，通过formBuilder创建了一个空的FormGroup对象，并使用forEach循环遍历复选框列表，为每个复选框创建一个FormControl对象，并将其添加到FormGroup中。

最后，您可以在组件中访问每个复选框的值。例如，您可以在提交表单时获取选中的复选框值：

onSubmit() {
  const selectedCheckboxes = Object.keys(this.myForm.value)
    .filter(key => this.myForm.value[key]);
  console.log(selectedCheckboxes);
}

在上述代码中，通过Object.keys(this.myForm.value)获取FormGroup中所有FormControl的键，然后使用filter方法筛选出选中的复选框的键，并将其打印到控制台。

这是一个基本的示例，您可以根据实际需求进行修改和扩展。关于Angular的更多信息和示例，请参考腾讯云的Angular产品文档：Angular产品文档。