如何实现两个ngx-datatable组件的排序同步并解决视图不更新问题

问题根因 #

• 你的表格行数据绑定的是nextActionRowData$ | async、requestQueueRowData$ | async两个Observable流，排序逻辑中仅修改了普通变量nextActionRowData、requestQueueRowData，没有更新对应的Observable流发射值，async管道无法感知到数据变化，因此不会触发视图更新。
• 你封装的app-data-table内部维护了独立的排序状态（表头排序箭头、内部排序配置sorts），仅修改源数据没有同步两个表格的内部排序状态，会导致未交互的表格表头显示异常，甚至内部逻辑覆盖你传入的排序后数据。

解决步骤 #

1. 先通过@ViewChild获取两个表格的组件实例，在你的父组件类中添加如下代码：

// 引入ViewChild
import { ViewChild } from '@angular/core';

// 类中声明实例引用
@ViewChild('nextActionTable') nextActionTable: any;
@ViewChild('normalRequestTable') normalRequestTable: any;

2. 修改排序逻辑，更新Observable流的发射值，同时同步两个表格的内部排序状态：

/** On Sort */
public onSort(event: any): void {
    const sortObj: SortPropDir = event?.sorts[0];
    // 从Subject中取最新值排序，再发射新值给async管道
    const sortedNextAction = this.sortTableData(sortObj, this.nextActionRowData$.value);
    this.nextActionRowData$.next([...sortedNextAction]);
    const sortedRequest = this.sortTableData(sortObj, this.requestQueueRowData$.value);
    this.requestQueueRowData$.next([...sortedRequest]);
    // 同步两个表格的内部排序状态，保证表头排序箭头显示一致
    this.nextActionTable.sorts = [sortObj];
    this.normalRequestTable.sorts = [sortObj];
    // 可选：强制触发表格重绘，兜底解决变更检测失效问题
    this.nextActionTable.recalculate();
    this.normalRequestTable.recalculate();
}

3. 检查你的app-data-table封装组件，确保已经把内部ngx-datatable的sorts属性暴露为输入项：

// app-data-table.component.ts 中添加
@Input() set sorts(value: SortPropDir[]) {
  // 这里的innerNgxDatatable是你组件内部对<ngx-datatable>的实例引用
  this.innerNgxDatatable.sorts = value;
}

内容的提问来源于stack exchange，提问作者Jason Spence