angular - PrimeNg 数据表自定义排序重复自身

Question

我在 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 作为返回获取全部数据并对 View 重新排序。现在这里发生的是这个方法 sortColumn() 不断被重复调用。

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

Answer 1

你可以试试事件onSort of datatable

<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。只有在排序列中单击时才会调用此事件。

希望对你有帮助。