Блог

Я создал общий компонент, который использует <ngx-datatable> внутри компонента и передает все входные данные, чтобы заставить его работать. Все работает так, как и ожидалось.

Проблема в том, что у меня есть запрос на синхронизацию сортировки двух таблиц данных, когда пользователь пытается выполнить сортировку по любой таблице данных.

Вот мои две таблицы данных

 <!-- Next Action: Data Table -->
<app-data-table #nextActionTable
    *ngIf="nextActionRowData amp;amp; 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);
}
 

Консоль регистрирует правильно отсортированные данные строк, но представление не обновляет таблицу, с которой не взаимодействовали. Мы будем очень признательны за любую помощь.

Посмотрите на свой источник данных (я надеюсь).

 [rowData]="requestQueueRowData$ | async"
 

и

 [rowData]="nextActionRowData$ | async"
 

это наблюдаемо, но в функции сортировки вы сортируете массив.
Сделайте ручную подписку на эти наблюдаемые объекты и установите результат в [rowData], как это:

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