Angular 6 mat表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

从材料cdk文档和完全在@Input() dataSource: CdkTableDataSourceInput<T>：

如果提供了数据数组，则在添加，删除或移动数组的对象时必须通知该表。这可以通过调用renderRows（）函数来完成，该函数将渲染自上次表渲染以来的diff。如果更改了数据数组引用，则表将自动触发对行的更新。

此外，从JavaScript的角度来看，splice方法会改变（更改）数组，因此不会更改数组引用。

参考：https://material.angular.io/cdk/table/api

Answer 2

更改MatTableDataSource中的元素后，可以强制重绘表格

this.order._updateChangeSubscription();

Answer 3

您可能必须在拼接后手动触发changedetetor

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