Question

我正在使用Angular 5，但在更新mat-table（Angular Material数据表）时遇到了一个问题。

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

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

可能有一些与垫子桌子有关的问题，但不确定。

谢谢。

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

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;
    }
  }

Answer 1

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

提供作为异步流的数据，您可以订阅该异步流以进行调试。过滤器的每次更改都应重新触发订阅块。如果您设法使其正常工作，则下一步是将这些数据放入数据源。

接下来要解决的是确保在数据源更改时创建一个新的对象（数组）。如在示例中所见，如果只是将数据推入到数组中，则表将永远不会知道数据已更新。

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

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

角度5：物料表数据在从其他组件触发时未更新

1 个答案: