我正在使用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中看不到类似的东西
如果您不想使用任何表单,则必须修改要迭代的相同列表以存储更新的值。
<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
迭代,这不是一个可观察的,因为这将有助于获取所有更新的复选框值。