点击按钮取消PrimeNG复选框选中状态：event.checked为数组的问题

• 原因分析：你遇到的event.checked是数组而非布尔值，是因为PrimeNG的p-checkbox在多选模式下（通过绑定数组类型的ngModel实现多选），onChange事件返回的$event.checked会是当前所有选中项的数组，而不是单个复选框的选中状态布尔值。

• 解决方案：通过双向绑定ngModel管理选中状态，直接清空绑定的数组即可实现全选取消：

1. 组件类中定义选中项数组：

// 组件类.ts文件
selectedFilters: string[] = []; // 存储所有选中的筛选值

clearAllFilters() {
  this.selectedFilters = []; // 清空数组，所有复选框自动取消选中
}

checkBoxFilter(category: string, value: string, event: any) {
  // 基于选中项数组处理筛选逻辑
  console.log('当前选中项:', event.checked);
}

2. 修改HTML模板，添加ngModel绑定：

<button (click)="clearAllFilters()">Clear All Filters</button>

<p-checkbox 
  *ngFor="let cb of filterColorCheckboxes" 
  [value]="cb.value" 
  label="{{cb.value | titlecase}}" 
  [(ngModel)]="selectedFilters"
  (onChange)="checkBoxFilter(cb.category, cb.value, $event)">
</p-checkbox>

• 补充说明：
  • 将value="{{cb.value}}"改为[value]="cb.value"，这是Angular属性绑定的最佳实践，避免字符串插值的潜在问题。
  • 通过[(ngModel)]="selectedFilters"双向绑定选中状态数组，数组清空时，所有绑定的p-checkbox会自动同步取消选中状态。
  • 此时onChange事件的event.checked仍为选中项数组，可在checkBoxFilter方法中基于该数组处理筛选逻辑。

内容的提问来源于stack exchange，提问作者Ayushi Gupta