PrimeNg 数据表自定义排序重复自身
PrimeNg Datatable Custom Sorting repeating itself
我在 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);
}
return 中的 API 获取全部数据并对视图重新排序。现在这里发生的是这个方法 sortColumn() 不断被重复调用。
任何人都可以帮助我了解可能导致此问题的原因以及解决方法吗?
你可以尝试事件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。只有在排序列中单击时才会调用此事件。
希望对你有所帮助
我在 Prime ng 的 p-table 中同时使用 onSort 和 sortFunction 时遇到了重复的 http 调用问题。使用 [lazy]="true", (onLazyLoad)="customSort($event)" in p-table 标签 in angular8.
解决了问题
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
}
我在 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);
}
return 中的 API 获取全部数据并对视图重新排序。现在这里发生的是这个方法 sortColumn() 不断被重复调用。
任何人都可以帮助我了解可能导致此问题的原因以及解决方法吗?
你可以尝试事件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。只有在排序列中单击时才会调用此事件。
希望对你有所帮助
我在 Prime ng 的 p-table 中同时使用 onSort 和 sortFunction 时遇到了重复的 http 调用问题。使用 [lazy]="true", (onLazyLoad)="customSort($event)" in p-table 标签 in angular8.
解决了问题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
}