如何同步两个ngx-datatable数据排序

Question

我构建了一个共享组件，它在组件内部使用 <ngx-datatable> 并传递所有数据输入以使其正常工作。一切正常。

问题是当用户尝试对任一数据 table.

进行排序时，我有一个同步两个数据 table 排序的请求

这是我的两个数据tables

<!-- Next Action: Data Table -->
<app-data-table #nextActionTable
    *ngIf="nextActionRowData && nextActionRowData.length"
    class="review-queue__table"
    title="Next Action"
    [theme]="DataTableTheme.Red"
    [rowData]="nextActionRowData$ | async"
    [columnData]="nextActionColumnData"
    [columnMode]="ColumnMode.Flex"
    [horizontalScroll]="true"
    headerHeight="auto"
    [footerHeight]="0"
    rowHeight="auto"
    [rowsPerPage]="5"
    (reorder)="onReorder($event)"
    (sort)="onSort($event)">
</app-data-table>

<!-- Request Queue: Data Table -->
<app-data-table #normalRequestTable
    class="review-queue__table"
    title="Request Queue"
    [theme]="DataTableTheme.Blue"
    [rowData]="requestQueueRowData$ | async"
    [columnData]="requestQueueColumnData"
    [columnMode]="ColumnMode.Flex"
    [horizontalScroll]="true"
    headerHeight="auto"
    [footerHeight]="0"
    rowHeight="auto"
    [rowsPerPage]="10"
    (reorder)="onReorder($event)"
    (sort)="onSort($event)">
</app-data-table>

这里是排序函数

/** On Sort */
public onSort(event: any): void {
    const sortObj: SortPropDir = event?.sorts[0];

    this.nextActionRowData = [...this.sortTableData(sortObj, this.nextActionRowData)];
    this.requestQueueRowData = [...this.sortTableData(sortObj, this.requestQueueRowData)];

    console.log(`Priority Table Sort: ${sortObj?.dir}`, this.nextActionRowData);
    console.log(`Normal Table Sort: ${sortObj?.dir}`, this.requestQueueRowData);
}

控制台记录正确排序的行数据，但视图无法更新未与之交互的 table。非常感谢任何帮助。

Answer 1

看看你的数据源（我希望）。

[rowData]="requestQueueRowData$ | async"

和

[rowData]="nextActionRowData$ | async"

这是 Observables，但是在排序函数中，您正在对数组进行排序。手动订阅那些 Observables 并将结果集设置为 [rowData]，如下所示：

[rowData]="requestQueueRowData"
[rowData]="nextActionRowData"

如何同步两个ngx-datatable数据排序

How to synchronize two ngx-datatable data sorting

ngx-datatable

angular