如何将 MatTableDataSource 与 observable 一起使用？

Question

我正在使用 mat-table 并且我试图将MatTableDataSource与 observable一起使用（我从 Web 服务获取数据），但我不知道如何配置MatTableDataSource以使用 observable 而不是数组。

这个问题的唯一解决方案是在ngOnInit方法中订阅 observable并在新数据到达时始终创建一个新的 MatTableDataSource 吗？

这是我到目前为止所拥有的，但我不知道这是否是使用可观察的MatTableDataSource的正确解决方案。

dataSource: MatTableDataSource<Thing>;
@ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
@ViewChild(MatSort, { static: true }) sort: MatSort;

ngOnInit() {
    getThings().subscribe(things => {
        this.dataSource = new MatTableDataSource(things);
        this.dataSource.paginator = this.paginator;
        this.dataSource.sort = this.sort;
        });
}

Answer 1

使用 MatTableDataSource 作为 Observable

你可以只pipe观察到：

thingsAsMatTableDataSource$: Observable<MatTableDataSource<Thing>>  =
  getThings().pipe(
    map(things => {
      const dataSource = new MatTableDataSource<Thing>();
      dataSource.data = things;
      return dataSource;
}));

您可以在模板中的可观察对象上使用异步管道：

[dataSource]="thingsAsMatTableDataSource$ | async"

这样你就不必订阅，仍然可以享受垫表排序等......

防止重复调用构造函数

只需将其实例化为私有成员一次并使用它即可：

private dataSource = new MatTableDataSource<Thing>();

thingsAsMatTableDataSource$: Observable<MatTableDataSource<Thing>>  =
  getThings().pipe(
    map(things => {
      const dataSource = this.dataSource;
      dataSource.data = things
      return dataSource;
}));

这是Stackblitz上的一个简单示例。

Answer 2

您应该能够MatTableDataSource在类级别更新一次，然后data在ngOnInit.

dataSource = new MatTableDataSource<Thing>();
@ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
@ViewChild(MatSort, { static: true }) sort: MatSort;

ngOnInit() {
    getThings().subscribe(things => {
        this.dataSource.data = things;
        this.dataSource.paginator = this.paginator;
        this.dataSource.sort = this.sort;
    });
}

Answer 3

这是一个解决方法，因为 MatTableDataSource 不支持 Observable 作为数据源

import { MatTableDataSource } from '@angular/material';
import { Observable, Subscription } from 'rxjs';
import { SomeInterface} from './some.interface';

export class CustomDataSource extends MatTableDataSource<SomeInterface> {

    private collection: SomeInterface[] = [];

    private collection$: Subscription;

    constructor(collection: Observable<SomeInterface[]>) {
        super();
        this.collection$ = collection.subscribe(data => {
           this.data = data; // here you have to adjust the behavior as needed
        });
    }

   disconnect() {
     this.collection$.unsubscribe();
     super.disconnect();
   }
}

然后在组件中：

dataSource: CustomDataSource;

ngOnInit(): void {
  const observableData$ = getData();
  this.dataSource = new CustomDataSource(observableData$);
  // this.dataSource.sort = this.sort; // add sorting or filter
}

示例：堆栈闪电战