如何在不使用任何形式的情况下获取角度材料2中的所有复选框值

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>

comp 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 进行迭代，这不是可观察的，因为这将有助于获取所有更新的复选框值。