如何在ngx-datatable排序后获取更新的排序项

问题背景 #

使用swimlane/ngx-datatable展示列表，为每行动态添加了点击弹出的操作菜单。排序后表格已显示为排序后的状态，但点击操作菜单时触发的是错误项的逻辑——因为操作菜单项始终基于初始表格数据生成，而非排序后的更新数据。需要获取排序后的表格对象，或解决操作菜单与行不匹配的问题。

核心原因 #

ngx-datatable的客户端排序逻辑中，组件内部会维护一份排序后的数据集，但不会主动修改你绑定的tempDocumentCollection数组。直接访问该数组会拿到初始未排序的数据，导致操作菜单的数据源与表格显示的行顺序不一致。

解决方案 #

方案1：通过表格实例获取排序后的数据 #

利用组件的(sort)事件，结合表格实例的rows属性直接获取内部排序后的完整数据集：

1. 模板中绑定排序事件并保留表格实例引用

<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
               (sort)="onSort($event)"> <!-- 新增排序事件绑定 -->
  <!-- 现有footer内容 -->
</ngx-datatable>

2. 组件中获取排序后的数据

import { Component, ViewChild, ChangeDetectorRef } from '@angular/core';
import { DatatableComponent } from '@swimlane/ngx-datatable';

// 组件元数据省略
export class YourComponent {
  @ViewChild('table') table!: DatatableComponent;
  tempDocumentCollection: any[] = [];

  constructor(private changeDetectorRef: ChangeDetectorRef) {}

  onSort(event: any) {
    // 获取组件内部已排序的行数据
    const sortedRows = this.table.rows;
    // 更新绑定数组，触发视图更新
    this.tempDocumentCollection = [...sortedRows];
    // 若变更检测未自动触发，手动调用
    this.changeDetectorRef.detectChanges();
  }
}

方案2：直接绑定当前行对象（更推荐） #

操作菜单匹配错误的本质是依赖外部数组的索引或原始数据，而非当前显示的行对象。在操作列的模板中直接传递当前行数据，彻底避免顺序不匹配问题：

假设你的操作列定义如下，修改模板直接使用row变量：

<!-- 在columns数组对应的操作列模板中 -->
<ng-template let-row="row" ngx-datatable-cell-template>
  <button class="action-btn" (click)="openActionMenu(row)">
    <!-- 操作图标 -->
  </button>
</ng-template>

组件中处理菜单逻辑时直接使用传入的行对象：

openActionMenu(row: any) {
  // 基于当前点击的行对象处理逻辑，无需依赖tempDocumentCollection的顺序
  console.log('当前操作的行数据:', row);
}

为什么之前的方法无效 #

你之前的onSort方法只是对初始的tempDocumentCollection进行了复制和重置，没有获取到ngx-datatable内部排序后的实际数据，因此数组内容始终是初始状态。

内容的提问来源于stack exchange，提问作者David Malar