单击按钮时刷新角度材料数据表数据源

【问题标题】：refresh angular material data table dataSource when button clicked单击按钮时刷新角度材料数据表数据源
【发布时间】：2020-03-18 12:09:29
【问题描述】：

我想在单击一个按钮时刷新数据表。有 3 个按钮。

示例：stackblitz（不重定向到客户页面）

我不明白为什么它不更新数据表中的列表。数据表是通用的。所以只需要传递数据源。

【问题讨论】：

或者，您可以将新数据分配给this.tableData，以便自动刷新 MatDataSource
@GaurangDhorda 如何分配？
尽可能分享你的代码的堆栈闪电
@GaurangDhorda 好的。我会努力做到的。
@GaurangDhorda 我创建了stackblitz.com/edit/angular-jxh2rd，但它没有重定向。

标签： angular datatables angular-material material-design angular7

【解决方案1】：

如果您希望您的自定义数据表包装器应该响应输入更改，那么您需要在 ngOnChanges 中或使用 setter 来处理此行为：

ngOnChanges(changes: SimpleChanges) {
  if (changes['tableData']) {
    this.dataSource = new MatTableDataSource(this.tableData);
    this.displayedColumns = this.columnHeader.map(c => c.columnDef);
  }
}

Forked Stackblitz

【讨论】：

您还应该重新分配与分页相关的属性
我更新了 stackblitz stackblitz.com/edit/…
请注意我用{ static: true } 代替ViewChild
{ static: true } 会发生什么？
静态为 true 时，这些属性（this.sort, this.paginator）将在 NgOnChanges 中可用，否则它们将是未定义的