Angular14+PrimeNG14：列值全同时排序图标不应切换的问题

核心思路 #

当列所有值相同时，拦截默认排序行为，阻止排序状态（图标）切换。

具体实现方案 #

方案1：通过onSort事件拦截默认行为 #

利用PrimeNG Table的onSort事件，在排序触发前检查当前列数据是否全部相同，若一致则阻止默认操作：

1. 组件模板绑定事件：

<p-table [value]="yourDataSource" (onSort)="handleTableSort($event)">
  <!-- 列配置 -->
  <ng-template pTemplate="header" let-columns>
    <tr>
      <th *ngFor="let col of columns" pSortableColumn="{{col.field}}">
        {{col.header}}
        <p-sortIcon field="{{col.field}}"></p-sortIcon>
      </th>
    </tr>
  </ng-template>
</p-table>

2. 组件类中实现处理函数：

import { SortEvent } from 'primeng/api';

// ...

handleTableSort(event: SortEvent) {
  // 获取当前列的所有数据值
  const columnValues = this.yourDataSource.map(item => item[event.field]);
  // 校验所有值是否完全相同
  const allValuesEqual = columnValues.every(val => val === columnValues[0]);
  
  if (allValuesEqual) {
    event.preventDefault(); // 阻止默认排序逻辑，包括图标状态切换
  }
}

方案2：自定义表头控制排序图标状态 #

通过自定义表头模板，根据列数据是否全相同，控制排序图标的显示或交互状态：

1. 组件模板自定义表头：

<p-table [value]="yourDataSource" #tableRef>
  <ng-template pTemplate="header" let-columns>
    <tr>
      <th *ngFor="let col of columns" 
          [pSortableColumn]="col.field"
          [class.disabled-sort]="isColumnValuesSame(col.field)">
        {{col.header}}
        <p-sortIcon [field]="col.field" 
                    [disabled]="isColumnValuesSame(col.field)"></p-sortIcon>
      </th>
    </tr>
  </ng-template>
</p-table>

2. 组件类中实现校验方法：

isColumnValuesSame(field: string): boolean {
  if (!this.yourDataSource.length) return false;
  const firstVal = this.yourDataSource[0][field];
  return this.yourDataSource.every(item => item[field] === firstVal);
}

3. 可选：添加CSS禁用排序交互：

.disabled-sort {
  pointer-events: none;
  opacity: 0.6;
}

方案3：扩展排序服务（全局复用） #

若项目多处需要该逻辑，可扩展PrimeNG的排序服务，统一处理同值列的排序拦截：

1. 创建自定义排序服务，继承PrimeNG的SortService：

import { Injectable } from '@angular/core';
import { SortService, SortEvent } from 'primeng/api';

@Injectable()
export class CustomSortService extends SortService {
  sort(event: SortEvent): void {
    // 先校验列值是否全相同
    const columnValues = event.data.map(item => item[event.field]);
    const allValuesEqual = columnValues.every(val => val === columnValues[0]);
    
    if (!allValuesEqual) {
      super.sort(event); // 正常执行排序
    }
    // 若全相同，不执行任何操作，排序状态（图标）不会改变
  }
}

2. 在模块中替换默认服务：

import { NgModule } from '@angular/core';
import { SortService } from 'primeng/api';
import { CustomSortService } from './custom-sort.service';

@NgModule({
  providers: [
    { provide: SortService, useClass: CustomSortService }
  ]
})
export class YourTableModule { }

内容的提问来源于stack exchange，提问作者Antony SUTHAKAR J