DOM угловой таблицы 6 DOM не обновляется после объединения источника данных

Question

У меня есть mat-table

<mat-table #table [dataSource]="orders" [trackBy]="$index">

    <ng-container matColumnDef="id">
      <mat-header-cell *matHeaderCellDef> ID </mat-header-cell>
      <mat-cell *matCellDef="let row"> {{row.id}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="deliver_on">
        <mat-header-cell *matHeaderCellDef> Deliver On </mat-header-cell>
        <mat-cell *matCellDef="let row" [style.color]="row.deliver_on"> {{row.deliver_on}} </mat-cell>
    </ng-container>


    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row [ngClass]="row.highlight_row"  *matRowDef="let row; columns: displayedColumns;"></mat-row>

</mat-table>
<mat-paginator [length]="pageLength" [pageSize]="pageSize" (page)="next($event)">
</mat-paginator>

Я хочу обновить строки в определенной логике.

Однако, когда я обновляю источник данных (ARRAY SPLICE), DOM неменяется

var order = data.payload.order;
var index = this.orders.findIndex((orders) => orders.id === order.id);

Object.defineProperty(order, "highlight_row", {
    value: 'highlight_row',
    writable: true,
    enumerable: true,
    configurable: true
});

if (index > -1) {
    // update at same position
    this.orders.splice(index, 1, order);
}
else {
    this.orders = [...this.orders, order];
}

Answer 1

после того, как вы изменили элементы в MatTableDataSource, вы можете заставить таблицу перерисовать с помощью

this.order._updateChangeSubscription();

Answer 2

Из материала CDK Документация и точно в @Input() dataSource: CdkTableDataSourceInput<T>:

Если предоставляется массив данных, таблица должна быть уведомлена, когда объекты массива добавляются, удаляются или перемещаются. Это может быть сделано вызывая функцию renderRows (), которая будет рендерить diff, так как рендеринг последней таблицы Если ссылка на массив данных изменяется, таблица автоматически запустит обновление строк.

Кроме того, с точки зрения JavaScript, метод splice изменяет (изменяет) массив, поэтому ссылка на массив не изменяется.

Ссылка: https://material.angular.io/cdk/table/api

Answer 3

вам, вероятно, придется вручную запустить сменный детектор после соединения

if (index > -1) {
    // update at same position
    this.orders.splice(index, 1, order);
    this.changeDetectorRefs.detectChanges();
}