Question

我试图获取所有选中的复选框并对其执行某些功能。

<div class="outerdiv" *ngFor="let item of items">
<mat-checkbox>Hello</mat-checkbox>
<div>

<button (click)="filterSelectedItems()"></button>

filterSelectedItems(){
let outerdiv = this.element.nativeElement.querySelectorAll('.outerdiv');
 for(let i = 0; i < outerdiv.length; i++){
      let option = outerdiv[i].querySelector('mat-checkbox');
      if(option.checked){
        this.filterItem+=option.innerText;
      }
}

Answer 1

触发change的{{1}}事件时，您可能会得到检查值。

mat-checkbox

Answer 2

您可以在此StackBlitz Link

中获得Total 工作示例

您的html是，并且复选框onChange的{{1}}事件被触发。在这里，我们传递模板引用变量getCheckbox()。

#checkBox

您可以像这样使用<div *ngFor ="let item of items"> <mat-checkbox #checkBox [value]="item" (change)="getCheckbox(checkBox)"> {{item}} </mat-checkbox> </div> <div *ngFor="let checkedItem of checked"> <span> selected Key is: <strong> {{checkedItem.value }} </strong> : <strong> {{checkedItem.checked}} </strong> </span> </div>和#checkBox在component.ts文件中获取 @ViewChildren()的数组...

QueryList

如何在ngFor中使用mat-checkbox检查值

2 个答案: