Angular 5：材料表数据不会在从不同组件触发时更新答案

【问题标题】：Angular 5: Material table data not updating on triggering from a different componentAngular 5：材料表数据不会在从不同组件触发时更新
【发布时间】：2019-05-19 22:43:49
【问题描述】：

我正在开发 Angular 5，我在更新 mat-table（Angular Material 数据表）时遇到了问题。

有 2 个独立组件（没有父子组件）我正在更改一个组件中下拉列表的值，并尝试根据该值从数据库中获取值，从而更新数据表。

在调试时发现更新的数据来自数据库，但在数据表中看不到任何更新。

可能有一些与 mat-table 相关的问题，但不确定。

提前致谢。

下面是我用来从数据库中获取数据并绑定数据表的代码。

async GetFileHistoryDataBasedOnRole(selectedRole: string) {

    let fileHistoryDataBasedOnRole: any = await this.fileHistoryService.FetchFileHistoryDataBasedOnRole(selectedRole);

    if (fileHistoryDataBasedOnRole != undefined && fileHistoryDataBasedOnRole != null) {
      fileHistoryDataBasedOnRole = JSON.parse(fileHistoryDataBasedOnRole.toString());
      this.dataSource = new MatTableDataSource(fileHistoryDataBasedOnRole);
      this.dataSource.paginator = this.paginator;
      this.dataSource.sort = this.sort;
    }
  }

【问题讨论】：

标签： angular datatable angular-material

【解决方案1】：

为自己创建一个最小的例子：

以异步流的形式提供数据，您可以订阅以进行调试。过滤器的每次更改，都应该重新触发订阅块。如果您已经成功地完成了这项工作，那么下一步就是将此数据放入数据源中。

接下来要解决的问题是确保在数据源更改时创建一个新对象（数组）。正如您在示例中看到的，如果您只是将数据push 到数组中，您的表永远不会知道数据有更新。

因此，创建一个新数组（方法添加）并扩展它。这将重新渲染表格：

https://stackblitz.com/edit/angular-1erfob?file=app/table-basic-example.html

【讨论】：

上面发布的代码也用于更新数据，数据订阅成功，我正在从数据库获取更新的数据，但它没有绑定到数据表。
感谢您的回复，如果您每次创建新数据源对象时都会在我的代码中看到该示例，我已经看过该示例。
是的，但是由于缺少其他代码，我无法判断它是否真的被使用过。如果你扩展我在你的 bug 中使用的 Stackblitz，你可以获得更好的帮助。
当我在按钮而不是 onchange 事件的帮助下触发相同的事件时，它可以正常工作，但下拉更改事件不会发生这种情况。