当 p-column 使用 ng-template 时,排序 p-dataTable 不起作用
Sorting p-dataTable not working when p-column uses ng-template
我正在尝试对具有模板的列进行排序。我的理解是,当列使用模板时,排序应该通过响应排序事件来完成。
<p-column field="activityName" [sortable]="true" (onSort)="onNameSorting($event)">
<ng-template let-col let-activity="rowData" pTemplate="body">
//..
</ng-template>
</p-column>
但是,当我在事件处理程序中放置一个断点时,什么也没有发生。我错过了什么吗?
onNameSorting(e){
debugger; //--> the breakpoint is not being hit
//...
}
感谢您的帮助
编辑
正在断点,正在执行排序。然而 dataTable.
中没有反映任何变化
onNameSorting(e, dt){
debugger; //This break point is being hit now.
if(!!e.order && e.order > 0){
this.filteredItems = this.filteredItems
.sort((a, b) => (a.activityName < b.activityName) ? -1 : 1);
}else{
this.filteredItems = this.filteredItems
.sort((a, b) => (a.activityName > b.activityName) ? -1 : 1);
}
}
我假设您使用的是旧的主要数据-table。在那个版本中,没有 (onSort)="onNameSorting($event)"
绑定到 p-column
。将其移至 p-dataTable
例如:-
<p-dataTable scrollable="true" [value]="_rowList" [selectionMode]="selectionMode"
[responsive]="true" (selectionChange)="rowSelectionChange($event)"
(click)="rowSingleClick($event)" (dblclick)="rowDoubleClick($event)" [(selection)]="_selectedEntity"
<!-- refer to the next line, above lines are bunch of attributes -->
(onSort)="sortData($event, dt)"[sortField]="sortField" [sortOrder]="sortOrder" #dt>
<p-column field="activityName">
<ng-template let-col let-activity="rowData" pTemplate="body">
//..
</ng-template>
</p-column>
</p-dataTable>
建议:他们推出了新的 PrimeNg Turbo table。它更容易和更快。
我正在尝试对具有模板的列进行排序。我的理解是,当列使用模板时,排序应该通过响应排序事件来完成。
<p-column field="activityName" [sortable]="true" (onSort)="onNameSorting($event)">
<ng-template let-col let-activity="rowData" pTemplate="body">
//..
</ng-template>
</p-column>
但是,当我在事件处理程序中放置一个断点时,什么也没有发生。我错过了什么吗?
onNameSorting(e){
debugger; //--> the breakpoint is not being hit
//...
}
感谢您的帮助
编辑
正在断点,正在执行排序。然而 dataTable.
中没有反映任何变化onNameSorting(e, dt){
debugger; //This break point is being hit now.
if(!!e.order && e.order > 0){
this.filteredItems = this.filteredItems
.sort((a, b) => (a.activityName < b.activityName) ? -1 : 1);
}else{
this.filteredItems = this.filteredItems
.sort((a, b) => (a.activityName > b.activityName) ? -1 : 1);
}
}
我假设您使用的是旧的主要数据-table。在那个版本中,没有 (onSort)="onNameSorting($event)"
绑定到 p-column
。将其移至 p-dataTable
例如:-
<p-dataTable scrollable="true" [value]="_rowList" [selectionMode]="selectionMode"
[responsive]="true" (selectionChange)="rowSelectionChange($event)"
(click)="rowSingleClick($event)" (dblclick)="rowDoubleClick($event)" [(selection)]="_selectedEntity"
<!-- refer to the next line, above lines are bunch of attributes -->
(onSort)="sortData($event, dt)"[sortField]="sortField" [sortOrder]="sortOrder" #dt>
<p-column field="activityName">
<ng-template let-col let-activity="rowData" pTemplate="body">
//..
</ng-template>
</p-column>
</p-dataTable>
建议:他们推出了新的 PrimeNg Turbo table。它更容易和更快。