如何通过按键事件选中PrimeNG表格带pSelectableRow属性的行

解决方案 #

你直接修改selection属性不生效的核心原因是PrimeNG Table默认采用OnPush变更检测策略，直接修改组件属性不会触发视图重绘，同时你过滤场景下用table.value拿的是全量数据，不是用户搜索后的过滤结果，会出现选中内容和用户预期不一致的问题。
完整实现步骤如下：

1. 优先取过滤后的结果集，保证选中的是用户当前看到的列表项
2. 给selection赋值后手动触发变更检测，让页面选中状态同步
3. 可选：手动聚焦首行DOM，让上下方向键可以直接使用

示例代码

修改你的快捷键逻辑如下：

import { Table } from 'primeng/table';

// 确保你已经用@ViewChild拿到了Table实例
@ViewChild('dt') table!: Table;

this.addShortcut({ keys: 'f1' }).subscribe(() => {
  // 优先取过滤后结果，无过滤时取全量数据
  const visibleRows = this.table.filteredValue || this.table.value;
  if (!visibleRows || visibleRows.length === 0) {
    this.showMessage('当前无可用行可选中');
    return;
  }
  // 单选模式赋值为对象，多选模式替换为 [visibleRows[0]]
  this.table.selection = visibleRows[0];
  // 触发PrimeNG Table内部变更检测，同步页面选中状态
  this.table.cd.markForCheck();
  // 自动聚焦首行，后续上下方向键可直接切换选中
  const firstSelectableRow = document.querySelector('tr[pSelectableRow]:first-child') as HTMLElement;
  firstSelectableRow?.focus();
  this.showMessage('已选中首行，按Enter可确认');
});

补充Enter确认逻辑

你可以再加一组快捷键监听Enter按键，直接取当前this.table.selection做后续业务处理即可：

this.addShortcut({ keys: 'enter' }).subscribe(() => {
  if (!this.table.selection) return;
  // 这里写你选中行后的业务逻辑，比如打开详情、提交数据等
  console.log('确认选中行：', this.table.selection);
});

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