PrimeNG表格排序：仅在排序时显示排序图标

可以通过两种方式实现这个需求：

方法一：CSS样式控制（推荐，最简单） #

PrimeNG的排序列在被排序时会自动添加 p-sortable-column-sorted 类，我们可以利用这个类来控制图标的显示/隐藏：

/* 默认隐藏所有排序图标 */
.p-sortable-column .p-sort-icon {
  visibility: hidden;
}

/* 仅当列处于排序状态时显示图标 */
.p-sortable-column-sorted .p-sort-icon {
  visibility: visible;
}

使用 visibility 而非 display: none 可以避免表头文本位置跳动，因为图标元素仍会占据原有空间，保持布局一致性。

方法二：组件状态动态控制 #

如果需要更灵活的逻辑（比如结合其他状态判断），可以在组件中跟踪当前排序的字段，然后动态控制图标是否渲染：

1. 组件代码修改 #

import { Component, ViewChild } from '@angular/core';
import { Table, SortEvent } from 'primeng/table';

@Component({
  selector: 'your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  rows: any[]; // 你的数据源
  sortedField: string | undefined;

  @ViewChild('dt') dt!: Table;

  // 监听排序事件，更新当前排序字段
  onSort(event: SortEvent) {
    this.sortedField = event.field;
  }
}

2. 模板代码修改 #

给表格添加排序事件监听，并在每个排序图标上添加条件渲染：

<p-table #dt [value]="rows" styleClass="p-datatable-striped" responsiveLayout="scroll" (onSort)="onSort($event)">
  <ng-template pTemplate="header">
    <tr>
      <th pSortableColumn="id">
        ID
        <p-sortIcon field="id" *ngIf="sortedField === 'id'"></p-sortIcon>
      </th>
      <th pSortableColumn="name">
        Study Name
        <p-sortIcon field="name" *ngIf="sortedField === 'name'"></p-sortIcon>
      </th>
      <th pSortableColumn="status">
        Status
        <p-sortIcon field="status" *ngIf="sortedField === 'status'"></p-sortIcon>
      </th>
      <th pSortableColumn="createdOn">
        Created Date
        <p-sortIcon field="createdOn" *ngIf="sortedField === 'createdOn'"></p-sortIcon>
      </th>
      <th pSortableColumn="updatedOn">
        Last Updated Date
        <p-sortIcon field="updatedOn" *ngIf="sortedField === 'updatedOn'"></p-sortIcon>
      </th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-row>
    <tr>
      <td>{{row.id}}</td>
      <td>{{row.name}}</td>
      <td>{{row.status}}</td>
      <td>{{row.createdOn | date : 'MM/dd/yyyy'}}</td>
      <td>{{row.updatedOn | date : 'MM/dd/yyyy'}}</td>
    </tr>
  </ng-template>
</p-table>

这样只有当前被排序的列才会显示排序图标。

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