通过 primeng `
在 Angular 中结合 PrimeNG 使用表格（<p-table>）实现多选并触发业务逻辑时，关键在于利用框架提供的响应式数据绑定机制，而非试图从模板中“推送”选中项。PrimeNG 表格原生支持 [(selection)] 双向绑定，它会自动维护一个选中项数组（单选为单个对象，多选为 any[]），开发者只需在组件类中声明对应属性，并在模板中正确绑定即可。
✅ 正确用法：使用 [(selection)] 实现自动同步
在模板中，为 <p-table> 添加 [(selection)]="selectedItems"：
<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)="handleSelectedItems(selectedItems)"></p-button>? 注意：selectionMode="multiple" 是启用多选的必要配置；若仅需单选，可设为 "single"，此时 selectedItems 类型应为 any | null。
? 组件 TypeScript 部分（必需声明）
export class MyComponent {
items: any[] = [
{ id: 1, name: '项目A' },
{ id: 2, name: '项目B' },
{ id: 3, name: '项目C' }
];
selectedItems: any[] = []; // 多选模式下必须初始化为空数组
handleSelectedItems(items: any[]): void {
if (items.length === 0) {
console.warn('未选中任何项');
return;
}
console.log('已选中:', items);
// ✅ 此处可安全调用服务、弹窗、导出等业务逻辑
}
}⚠️ 常见错误与修正
❌ 错误：在 <p-tableCheckbox> 中误写 [pSelectableRow]="applicationProject"（变量名不匹配）
✅ 修正：统一使用 let-item 声明的上下文变量 —— [pSelectableRow]="item"❌ 错误：未初始化 selectedItems 或类型不匹配（如声明为 undefined 或 null）
✅ 修正：严格按选择模式初始化 —— 多选用 any[] = []，单选用 any | null = null❌ 错误：试图在 (onClick) 中动态传入 selectedItemsIWantToPass（模板中无此变量）
✅ 修正：放弃“传参思维”，改用组件属性直取 —— selectedItems 已由 PrimeNG 自动更新
? 进阶提示
- 如需监听选中状态实时变化，可订阅 onSelectionChange 事件：
<p-table (onSelectionChange)="onSelectionChanged($event)" ...>
- 支持全选/反选？配合 selectAll() 和 clearSelection() 方法，或使用 [(selection)] + 按钮逻辑控制。
通过这一模式，代码更简洁、可维护性更高，也完全符合 Angular 的响应式设计理念。
