如何处理垫子复选框选中和未选中的事件

Question

尝试在单击每个复选框时获取选中和未选中复选框值的值。怎么做呢?如何处理垫子复选框事件?如果有人知道，请帮助找到解决方案。

<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
<mat-option
*ngFor="let data of filteredData | async"
[value]="data"
[disabled]="isDisable(data)"
>
<div (click)="optionClicked($event, data)">
<mat-checkbox
[checked]="data.selected"
(change)="toggleSelection(data)"
(click)="$event.stopPropagation()"
[disabled]="isDisable(data)"
>
{{ data.item }}
</mat-checkbox>
</div>
</mat-option>
</mat-autocomplete>

演示:https://stackblitz.com/edit/angular-ivy-ebuzba?file=src%2Fapp%2Fshared%2Fmauto%2Fmauto.component.ts

Answer 1

示例

<mat-checkbox
[checked]="data.selected"
(change)="toggleSelection($event, data)"
[disabled]="isDisable(data)">
{{ data.item }}
</mat-checkbox>

import { MatCheckboxChange } from '@angular/material/checkbox'
toggleSelection(checkbox: MatCheckboxChange, data: YourDataType) {
// Where checkbox value would be something like
// { source: MatCheckbox, checked: true }
if (checkbox.checked) {
// Do stuff;
}
}

注意:如果你想以编程方式更新复选框的值，你应该使用[(ngModel)]或Angular Reactive FormControl