PrimeNg 数据表自定义排序重复自身答案

【问题标题】：PrimeNg Datatable Custom Sorting repeating itselfPrimeNg 数据表自定义排序重复自身
【发布时间】：2019-08-23 18:22:39
【问题描述】：

我在 Angular 2 应用程序中有一个数据表，我想在其中自定义对列进行排序。

<p-column field="eligible" header="Eligible" sortable="custom" (sortFunction)="sortColumn($event)"></p-column>

在我的组件文件中，我正在进行 API 调用，以根据某些逻辑从后端获取排序结果。

sortColumn(colName: any) {
  let columnName = undefined !== colName.field ? colName.field : colName;
  let sortObject: any = {};
  if (this.sortedColumn === columnName) {
   if (!this.sortAsc) {
     this.sortAsc = true;
     sortObject[columnName] = 'DESC';
   } else {
    this.sortAsc = false;
    sortObject[columnName] = 'ASC';
 }
 } else {
  this.sortedColumn = columnName;
  this.sortAsc = false;
  sortObject[columnName] = 'ASC';
 }
this.getData(sortObject);
}

作为回报，此 API 会取回整个数据并重新排序视图。现在这里发生的事情是这个方法 sortColumn() 不断被重复调用。

谁能帮助我了解可能导致此问题的原因以及如何解决它？

【问题讨论】：

标签： angular sorting primeng

【解决方案1】：

你可以试试数据表的onSort事件

<p-dataTable [value]="data" (onSort)="sortColumn($event)>
  <p-column field="vin" header="Vin" ></p-column>

  <p-column field="eligible"  header="Eligible" [sortable]="true"></p-column>    

  <p-column field="year" header="Year"></p-column>
  <p-column field="color" header="Color" ></p-column>
</p-dataTable>

这个事件有event.field：排序列的字段名和event.order(1 o -1) event.order。仅在单击排序列时调用此事件。

希望对你有帮助。

【讨论】：

onSort($event) 没有在组件内调用我的方法 sortColumn()。
我也遇到了同样的问题，设置表为lazy解决了：github.com/primefaces/primeng/issues/5163
我没有在我的专栏中使用此代码获得排序图标

【解决方案2】：

我在 Prime ng 的 p-table 中同时使用 onSort 和 sortFunction 时遇到了重复的 http 调用问题。在 angular8 的 p-table 标记中使用 [lazy]="true", (onLazyLoad)="customSort($event)" 解决了问题。

HTML:

<p-table [loading]="isLoading"
         [value]="listProjectClone"
         [scrollable]="true"
         sortMode="single"
         styleClass="custom-table borderless" [lazy]="true" 
         (onLazyLoad)="customSort($event)">

TS 文件代码：

import { LazyLoadEvent } from 'primeng/api';

customSort(event: LazyLoadEvent) {   
    this.sortBy = event.sortField;
    this.sortOrderBy = event.sortOrder == 1 ? 'ASC' : 'DESC';
    //http call to server
   }

【讨论】：