如何在 Angular/PrimeNG 中将表格选中项传递给组件方法

通过 primeng `` 的 `[(selection)]` 双向绑定，可自动同步用户选中的行数据到组件属性，无需在模板中手动传参，点击按钮时直接访问该属性即可调用处理逻辑。

在 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）：

  
    
      
        
      
      {{ item.name }}
      {{ item.id }}
    
  

? 关键点说明：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 事件：

onSelectionChanged(event: { originalEvent: Event; value: any[] }) {
  console.log('Selection updated:', event.value);
}

至此，你已掌握 PrimeNG 表格中高效、健壮地获取并处理选中项的标准实践。