通过 primeng `
在 Angular 中结合 PrimeNG 表格实现多选并传递选中项，核心在于正确使用 [(selection)] 双向绑定机制——它会自动维护一个包含所有当前选中行对象的数组，完全解耦视图与逻辑传递过程。
✅ 正确用法示例
首先，在组件类中声明用于接收选中项的数组（类型建议明确）：
// component.ts
export class MyTableComponent {
items = [
{ id: 1, name: 'Project Alpha' },
{ id: 2, name: 'Project Beta' },
{ id: 3, name: 'Project Gamma' }
];
selectedItems: any[] = []; // 或更严格的类型：selectedItems: Project[] = [];
onClick(selected: any[]): void {
console.log('Selected items:', selected);
// 在此处执行业务逻辑，如批量删除、导出、审批等
}
}然后在模板中绑定 [(selection)]，并确保 p-tableCheckbox 的 [pSelectableRow] 正确指向当前 item（不是硬编码变量名如 applicationProject）：
<!-- component.html -->
<p-table [value]="items" [(selection)]="selectedItems" dataKey="id">
<ng-template pTemplate="body" let-item>
<tr [pSelectableRow]="item">
<td>
<p-tableCheckbox [pSelectableRow]="item" [value]="item"></p-tableCheckbox>
</td>
<td class="cell-breakWord">{{ item.name }}</td>
<td>{{ item.id }}</td>
</tr>
</ng-template>
</p-table>
<p-button label="处理选中项" (onClick)="onClick(selectedItems)"></p-button>? 关键点说明：dataKey="id" 推荐显式设置，确保选中状态基于唯一标识准确追踪（尤其在数据刷新后仍保持一致性）；let-item 定义了作用域变量，所有绑定必须使用 item，否则 p-tableCheckbox 将无法正确关联行数据；[(selection)] 是双向绑定，支持单选（selectedItem: any）和多选（selectedItems: any[]），本例为多选场景；按钮事件中直接引用 selectedItems，无需从模板传参，语义清晰且避免潜在的 undefined 或作用域错误。
⚠️ 常见错误规避
- ❌ 错误写法：(onClick)="onClick(selectedItemsIWantToPass)" —— 模板中不存在该变量，会导致 undefined；
- ❌ 错误绑定：[pSelectableRow]="applicationProject" —— 若 applicationProject 未定义或非当前行对象，复选框将失效；
- ❌ 忽略 dataKey —— 当数据对象无稳定唯一键时，可能导致选中状态错乱。
✅ 进阶提示
如需响应式监听选中变化，可在组件中使用 @Input() 配合 OnChanges，或订阅 selectionChange 事件：
<p-table [value]="items" [(selection)]="selectedItems" (onSelectionChange)="onSelectionChanged($event)">
onSelectionChanged(event: { originalEvent: Event; value: any[] }) {
console.log('Selection updated:', event.value);
}至此，你已掌握 PrimeNG 表格中高效、健壮地获取并处理选中项的标准实践。
