通过 primeng `
在 PrimeNG 表格中实现“选中行 → 传参调用函数”的核心在于利用其内置的选择状态管理机制，而非尝试在模板中动态提取选中项并传入事件处理器（如 (onClick)="function(selectedItemsIWantToPass)" 这种写法在 Angular 模板中无法直接解析变量）。
✅ 正确做法是：使用 [(selection)] 双向绑定将选中项同步至组件类中的一个数组属性，再在按钮点击事件中直接引用该属性。
✅ 步骤详解
-
声明选择状态变量（TypeScript 组件中）
在组件类中定义一个数组，用于接收选中项（类型建议与 items 元素类型一致，提升类型安全）：export class MyComponent { items = [ { id: 1, name: 'Project Alpha' }, { id: 2, name: 'Project Beta' }, { id: 3, name: 'Project Gamma' } ]; selectedItems: any[] = []; // 或更严格的类型：selectedItems: Project[] = []; } -
绑定 [(selection)] 并修正 p-tableCheckbox 配置
在模板中为添加 [(selection)]="selectedItems"，同时确保每行的 [pSelectableRow] 和 的 [pSelectableRow] 均绑定到当前 item（⚠️注意：原代码中误写为 applicationProject，应统一为 item）： <p-table [value]="items" [(selection)]="selectedItems" selectionMode="multiple"> <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)="onProcessSelected(selectedItems)"></p-button>? 提示：selectionMode="multiple" 是启用多选的必要设置（默认为 'single'）。若需单选，selectedItems 应为单个对象（如 selectedItem: any），绑定写法为 [(selection)]="selectedItem"。
-
在组件中定义处理函数
函数可直接操作 selectedItems 数组，例如批量提交、导出或校验：onProcessSelected(items: any[]): void { if (items.length === 0) { console.warn('未选中任何项'); return; } console.log('即将处理以下项目：', items); // 示例：调用服务 API // this.projectService.batchUpdate(items).subscribe(...); }
⚠️ 注意事项
- [(selection)] 依赖 p-table 的内部选择逻辑，务必确保 p-tableCheckbox 的 [value] 和 [pSelectableRow] 均正确绑定到同一数据项（即 item），否则选择状态不同步。
- 若表格启用了分页（[paginator]="true"），默认情况下 selection 仅作用于当前页；如需跨页多选，请启用 [(globalFilter)] 或配合 stateStorage="session" + 自定义选择持久化逻辑。
- 不要尝试在模板中通过插值（如 {{ selectedItems }}）或内联表达式传递复杂对象——Angular 模板不支持运行时变量求值，必须通过组件属性桥接。
通过以上方式，你就能以声明式、响应式的方式高效管理表格选中状态，并在任意时机（如按钮点击、快捷键触发等）安全可靠地获取并处理选中数据。
