Angular通用表格组件中PrimeNG pSortableColumn排序失效排查

你的代码里存在几个关键问题导致排序功能无法正常工作，以下是具体问题和修复方案：

1. 未启用客户端排序模式 #

PrimeNG的p-table默认不会自动启用客户端排序，需要显式设置排序模式并确保数据为前端可处理的数组/可观察对象。在p-table标签中添加以下属性：

sortMode="single"
[lazy]="false"

sortMode="single"表示单列排序（符合常规需求），[lazy]="false"明确使用客户端排序逻辑。

2. pSortableColumn绑定语法不规范 #

你使用了插值表达式pSortableColumn="{{ col.field }}"，虽然部分场景下能生效，但PrimeNG推荐使用属性绑定避免解析问题，修改为：

[pSortableColumn]="col.field"

3. p-sortIcon未关联表格实例 #

p-sortIcon需要绑定到目标表格的模板引用变量，才能同步显示排序状态。修改p-sortIcon标签：

<p-sortIcon [field]="col.field" [table]="dt"></p-sortIcon>

同时field属性也改用属性绑定[field]="col.field"替代插值写法。

4. 确认模块导入完整 #

确保你的Angular模块中已导入PrimeNG的核心表格及排序相关模块（PrimeNG 14+需单独导入SortModule）：

import { TableModule } from 'primeng/table';
import { SortModule } from 'primeng/sort';

@NgModule({
  imports: [
    // 其他业务模块
    TableModule,
    SortModule
  ]
})
export class YourFeatureModule { }

5. 验证数据字段匹配 #

检查cols数组中的field属性，必须与lines数组内每条数据的字段完全一致（比如col.field为'createTime'，则rowData.createTime需存在且为可排序类型：字符串、数字、日期等）。

修复后的完整模板代码 #

<p-table
  #dt
  [columns]="cols"
  [value]="lines"
  dataKey="id"
  sortMode="single"
  [lazy]="false"
>
  <ng-template pTemplate="caption">
    <div class="table-header">
      {{ tableName }}
    </div>
  </ng-template>
  <ng-template pTemplate="header" let-columns>
    <tr class="white-space-nowrap">
      <th
        *ngFor="let col of columns"
        [pSortableColumn]="col.field"
      >
        <div class="flex justify-content-between align-items-center">
          {{ col.header }}
          <p-sortIcon [field]="col.field" [table]="dt"></p-sortIcon>
        </div>
      </th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-rowData let-columns="columns">
    <tr [pSelectableRow]="rowData">
      <td *ngFor="let col of columns">
        <span class="p-column-title">{{ col.field }}</span>
        <span>{{
          col.date
            ? (rowData[col.field] | date : 'dd/MM/yyyy')
            : rowData[col.field]
        }}</span>
      </td>
    </tr>
  </ng-template>
</p-table>

完成以上修改后，点击表头的排序图标即可触发升序/降序排序。如果是服务器端排序场景，还需绑定(onSort)="handleSort($event)"事件并在组件类中实现后端请求逻辑，但从你的代码场景看，客户端排序配置已足够满足需求。

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