如何在不使用任何形式的情况下获取 angular material2 中的所有复选框值

Question

我正在使用 ngFor:

构建我的复选框

 <ng-container *ngFor="let cb of (myList$ | async)">
      <mat-checkbox
        [value]="cb.name"
        [checked]="cb.checked"
        (change)="checkboxChange($event)" // only giving single value
        >{{ cb.name }}</mat-checkbox
    </ng-container>

(change)="checkboxChange($event)" 只给出一个值，但我正在寻找所有复选框值。

知道如何在不使用任何形式的情况下获取所有复选框 checked 的值吗？

在文档中看不到类似的内容https://material.angular.io/components/checkbox/overview

Answer 1

如果您不想使用任何表单，则必须修改您正在迭代的同一个列表以存储更新后的值。

<ng-container *ngFor="let cb of list">
      <mat-checkbox
        [checked]="cb.checked"
        (change)="cb.checked = $event.checked;
        checkboxChange()" >{{ cb.name }}
      </mat-checkbox>
</ng-container>

编译 ts 文件

export class AppComponent implements OnInit {
  name = 'Angular';
  myList$;
  list = []

  ngOnInit() {
    this.myList$ = of([
      {
        name: 'A', checked: true
      },
      {
        name: 'B', checked: false
      },
      {
        name: 'C', checked: true
      }]);

    this.myList$.subscribe((data) => {
      this.list = data;
    })

  }

  checkboxChange() {
    console.log(this.list)
  }
}

看到这个demo

注意：我还使用单独的 list 进行迭代，这不是可观察的，因为这将有助于获取所有更新的复选框值。

如何在不使用任何形式的情况下获取 angular material2 中的所有复选框值

How to get all checkboxes values in angular material2 without using any kind of forms

checkbox

angular-material2

angular