我正在使用 swimlane/ngx-datatable 库来显示列表。在每一行的列表中,我动态添加带有项目的操作菜单(当单击图标时,菜单将显示为弹出窗口)。
问题: 对项目进行排序后,在表单中进行排序,但是当我单击操作菜单时,它显示错误的项目。
RCA: 每行的操作菜单项始终基于初始表项而不是更新的排序项生成。
请帮助我了解如何在排序后获取 ngx-datatable 中更新的表对象。
<ngx-datatable #table class="table-element elevation-1 bootstrap" [cssClasses]="tableConfig.cssClasses"
[rows]="tempDocumentCollection" [columns]="columns" [rowClass]="getRowClass" [reorderable]="true"
[headerHeight]="tableConfig.headerHeight" [footerHeight]="tableConfig.footerHeight"
[rowHeight]="tableConfig.rowHeightSmall" selectionType="checkbox" (select)='onSelect($event)'
[scrollbarV]="true" [scrollbarH]="true" columnMode="flex" style="width:100%" ngxColumnMode>
<ngx-datatable-footer>
<ng-template ngx-datatable-footer-template let-rowCount="rowCount" let-pageSize="pageSize"
let-selectedCount="selectedCount" let-curPage="curPage" let-offset="offset">
<div class="container-fluid d-flex align-items-center">
<span class="total">{{'DEFAULT.TOTAL' | translate }} {{ rowCount.toLocaleString() }}</span>
<si-pagination [currentPage]="curPage" [totalRowCount]="rowCount" [pageSize]="pageSize"
(currentPageChange)="table.onFooterPage({ page: $event })" class="ms-auto">
</si-pagination>
</div>
</ng-template>
</ngx-datatable-footer>
我在排序事件中尝试使用以下代码,但“tempDocumentCollection”始终显示相同的数据而不是排序的数据。
onSort(row: any) {
this.tempDocumentCollection = [...this.tempDocumentCollection];
const data = this.tempDocumentCollection;
this.tempDocumentCollection = [];
this.changeDetectorRef.detectChanges();
this.tempDocumentCollection = [...data];
}
<ngx-datatable .... #table>
</ngx-datatable>
@ViewChild(DatatableComponent) table: DatatableComponent;
public getGridData() {
console.log(this.table._internalRows)
}
希望这对您有帮助。