角材料表拖放列不更新行答案

【问题标题】：Angular material table drag and drop columns doesn't update rows角材料表拖放列不更新行
【发布时间】：2019-11-22 06:55:03
【问题描述】：

有没有办法根据通过拖放对列所做的更改来更新 Angular Material 表的数据源（行）？

我有一个更新列的dropListedDrop 事件：

dropListDropped(event: CdkDropList, index: number) {
  if (event) {
    moveItemInArray(this.headers, this.previousIndex, index);
    this.setDisplayedColumns();
  }
}

但在拖放操作完成后，dataSource 中的数据不会自动更改。

此处示例：StackBlitz

【问题讨论】：

标签： angular drag-and-drop angular-material2 angular-material-table

【解决方案1】：

dropListDropped(event: CdkDropList, index: number) {
  if (event) {
    moveItemInArray(this.headers, this.previousIndex, index);
    this.headers = [...this.headers];
  }
}

在线演示HERE（即使您有 Angular 管道过滤器，此解决方案也有效）

【讨论】：

正是我想要的！谢谢:)

【解决方案2】：

它提到here Angular Material 表不会自动更新以优化性能。要更新表格，您只需在表格上调用renderRows()。

您可以像这样访问表格@ViewChild(MatTable) table: MatTable<any>; 然后调用table.renderRows();

【讨论】：

好点，但无法使用 ViewChild 访问表； Cannot read property 'renderRows' of undefinedstackblitz