Angular 14与PrimeNG：如何在点击处理器中获取p-tableCheckbox状态？

你遇到的问题根源在于用了click事件监听状态变化，而PrimeNG的p-tableCheckbox是封装过的组件，click事件传递的是原生鼠标点击事件，并非组件的状态变更事件，所以拿不到checked属性。

正确的做法是使用组件官方提供的(onChange)事件，它会直接传递包含勾选状态的对象：

1. 修改模板中的事件绑定：

<p-tableCheckbox (onChange)="onSelectAll($event)"></p-tableCheckbox>

2. 调整组件中的处理方法：

onSelectAll(event: { checked: boolean }) {
  this.selectedCustomers = event.checked ? [...this.customers] : [];
}

如果一定要用click事件（不推荐，因为组件内部结构可能变动），可以通过DOM查询找到原生checkbox元素来获取状态：

onSelectAll(event: MouseEvent) {
  const checkbox = (event.target as HTMLElement).querySelector('input[type="checkbox"]') as HTMLInputElement;
  this.selectedCustomers = checkbox?.checked ? [...this.customers] : [];
}

优先推荐用onChange事件，这是PrimeNG组件设计时提供的标准交互方式，兼容性和稳定性更好。

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