Angular Material 2: 如何在向数据源添加数据后刷新md-table？

15 浏览
0 Comments

Angular Material 2: 如何在向数据源添加数据后刷新md-table？

有人能提供一个完整的mat-table示例吗？当表格加载完成后，再添加一个数据，并更新表格？

我的程序能够显示表格、加载数据、弹出对话框询问新数据、将数据添加到数据库，但我不知道如何刷新表格。

我在这个链接中找到了这个例子：

connect(): Observable {
  return this._userService.dataChanged
      .switchMap(() => this._userService.getAllUsers()
}

但我不知道如何实现它。

谢谢

0

2 答案

0 Comments

问题出现的原因是在向数据源添加新数据后，无法刷新md-table。

解决方法是使用数组的push方法将新对象推送到数组中。

代码示例：

yourarray.push(your new object);

0
0 Comments

Angular Material 2: 如何在向数据源添加数据后刷新md-table？

问题原因：在Angular Material 2中，当我们向数据源添加数据后，md-table并不会自动刷新显示新的数据。

解决方法：我们可以通过实现一个数据源管理器来解决这个问题。以下是我在项目中使用的方法：

首先，实现一个数据源管理器的抽象类`DataSourceManager`，其中包含了一个`Observable`类型的数据源`source`和一个`Subject`类型的手动数据源`manualSource`。在构造函数中，我们将数据源和手动数据源合并为一个新的Observable，然后通过`getObserver()`方法返回这个Observable。接着，我们实现了`reload()`方法，当调用该方法时，会将数据源中的数据推送到手动数据源中。同时，我们还实现了`push()`方法，用于手动添加数据到手动数据源中。

接下来，我们定义了一个继承自`DataSource`的类`MyDataSource`，并在构造函数中传入了一个`MyItemService`类型的参数。在`MyDataSource`类中，我们创建了一个`DataSourceManager`的实例`manager`，并将`MyItemService`中的`getAllItemsObserver()`方法作为数据源传入。在`connect()`方法中，我们通过`manager.getObserver()`返回数据源的Observable。`disconnect()`方法留空。

最后，当我们需要手动更新数据源时，只需调用`dataSource.manager.push()`方法即可。

以上就是解决Angular Material 2中刷新md-table的方法。通过实现一个数据源管理器，我们可以手动更新数据源并刷新md-table的显示。

0