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（）函数，该函数将渲染差异，因为最后一张桌子渲染。如果数据数组引用已更改，则表将自动触发对行的更新。

另外，从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();
}

拼接数据源后未更新Angular 6垫表DOM

3 个答案: