Angular Material 2:将数据添加到数据源后如何刷新 md-table? [英] Angular Material 2: How to refresh md-table after add data to datasource?

问题描述

有人可以放一个完整的带有数据源的 mat-table 示例，稍后在加载表并更新表时添加数据吗?

Could someone put a complete example of a mat-table with datasource adding a data later on when the table is loaded and the table is updated?

我的程序设法显示表格，数据的加载，要求新数据的对话框，要添加到数据库的数据，但我不知道如何刷新表格

My program manages to show the table, the load of data, the dialog box that asks for the new data, the data to add to the database, but I do not know how to refresh the table

我找到了这个例子

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

在此链接中:Angular Material 2:如何刷新 md-编辑记录后的表格?

但我不知道如何实现它.

But I do not know how to implement it.

谢谢

推荐答案

有几种方法可以实现您的要求.这是我在我的项目中使用的:

There are several ways to implement what you ask. This is what I use in my projects:

这实现了数据源的抽象:

This implements an abstraction of the data source:

class DataSourceManager<T> {
    private readonly manualSource = new Subject<T>();

    constructor(private readonly source: Observable<T>) {

    }

    public getObserver(): Observable<T> {
        return merge(
            this.source,
            this.manualSource,
        );
    }

    public reload(): void {
        this.source.subscribe(x => {
            this.push(x);
        });
    }

    public push(value: T): void {
        this.manualSource.next(value);
    }
}

这是在 MyItem 上输入的数据集，由 MyItemService 获取(这些是琐碎的并且超出范围):

This is the dataset typed on MyItem, fetch by MyItemService (these are trival and out of scope):

class MyDataSource extends DataSource<MyItem> {

    public readonly manager: DataSourceManager<MyItem[]>;

    constructor(private readonly myService: MyItemService) {
        super();

        this.manager = new DataSourceManager<MyItem[]>(
            this.myService.getAllItemsObserver();
    }

    public connect(): Observable<MyItem[]> {
        return this.manager.getObserver();
    }

    public disconnect() {
    }
}

现在，当您需要手动更新数据源时，只需调用dataSource.manager.push

Now, when you need to manually update the data source, simply call dataSource.manager.push

这篇关于Angular Material 2:将数据添加到数据源后如何刷新 md-table?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！