Angular:如何在更改时捕获复选框状态

Question

我是 Angular 新手。我的组件中有三个复选框。
当每个复选框的选中状态发生变化时，我需要获取所有三个复选框的选中状态。

        <div class="mb-15 p-0 ">
            <div class="col-2 p-0 font-700 font-12">
                <mat-checkbox (change)="onChange1($event)">
                </mat-checkbox>
            </div>
        </div>
        <div class="mb-15 p-0 ">
            <div class="col-2 p-0 font-700 font-12">
                <mat-checkbox (change)="onChange2($event)">
                </mat-checkbox>
            </div>
        </div>
        <div class="mb-15  p-0 ">
            <div class="col-2 p-0 font-700 font-12">
                <mat-checkbox (change)="onChange3($event)">
                </mat-checkbox>
            </div>
        </div>

根据复选框状态，必须在我的方法中执行一个小逻辑并向 WEB API 发送 POST 调用。
在任何单个复选框状态更改时捕获所有三个复选框状态的最佳方法是什么？感谢这方面的一些帮助。

Answer 1

为此，您可以使用 ReactiveForms。
演示
https://stackblitz.com/edit/angular-ivy-nauyv1?file=src%2Fapp%2Fapp.component.ts
代码
ts

form: FormGroup;

constructor(private fb: FormBuilder) {}

ngOnInit() {
  this.form = this.fb.group({
    /**
     * initial checkbox values
     */
    checkboxes: this.fb.array([false, false, false])
  });

  this.form.valueChanges
    .subscribe(v => {
      /**
       * You get the status change here
       */
      console.log(v);
    });
}

get checkboxes() {
  return (this.form.get("checkboxes") as FormArray).controls;
}

html

<form [formGroup]="form">
  <form formArrayName="checkboxes">
    <div *ngFor="let cb of checkboxes; let i = index">
      <input type="checkbox" [formControlName]="i">
    </div>
  </form>
</form>

您可以更换 input与您的 mat-checkbox以上。
备注
确保导入 ReactiveFormsModule 引用
https://angular.io/guide/reactive-forms