如何将 Observable 数组属性加载为 Angular Material Table 数据源？答案

【问题标题】：How to load Observable array property as Angular Material Table data source?如何将 Observable 数组属性加载为 Angular Material Table 数据源？
【发布时间】：2018-06-03 03:22:01
【问题描述】：

我有一个 Observable 数组属性，其值是从 Rest API 获取的。

目前我正在使用 ngFor 来显示标准 html 表中的数据。

现在我想切换到 Angular 材质表 (MatTableDataSource)。如何使用 Observables 中的数据加载 [dataSource]？

【问题讨论】：

我下面的解决方案对您有帮助吗？

标签： angular angular-material observable

【解决方案1】：

您要么需要创建自定义DataSource，要么使用MatTableDataSource。

见here

【讨论】：

【解决方案2】：

给你。破解这个。我在一个名为 processor.service 的服务中有 observable，它使用相同的代码来填充我的所有表。变量在组件中并传递给服务：

组件

private dbTable = 'members';  // The table name where the data is.
private dataSource = new MatTableDataSource();

private displayedColumns = [
    'firstName',
    'lastName',
...]

ngAfterViewInit() {
    this.dataSource.paginator = this.paginator;
 }

// ------ GET ALL -----

  private getAllRecords() {
    return this.mainProcessorService.getAllRecords(
      this.dbTable,
      this.dataSource,
      this.paginator,
      );
  }

处理器.服务

  getAllRecords(dbTable, dataSource, paginator) {

    dataSource.paginator = paginator;

    // Populate the Material2 DataTable.
    Observable.merge(paginator.page)
      .startWith(null)  // Delete this and no data is downloaded.
      .switchMap(() => {
        return this.httpService.getRecords(dbTable,
          paginator.pageIndex);
      })
      .map(data => data.resource)  // Get data objects in the Postgres resource JSON object through model.

      .subscribe(data => {
          this.dataLength = data.length;
          dataSource.data = data;
        },
        (err: HttpErrorResponse) => {
          console.log(err.error);
          console.log(err.message);
          this.messagesService.openDialog('Error', 'Database not available.');
        }
      );
  }

我的 html 不是 ngFor，但应该很有用。结果创建了一个需要分页的长表，并且可能会完成您想要的。

<mat-table #table [dataSource]="dataSource" matSort>

        <ng-container matColumnDef="firstName">
          <mat-header-cell fxFlex="10%" *matHeaderCellDef> First Name </mat-header-cell>
          <mat-cell fxFlex="10%" *matCellDef="let row"> {{row.first_name}} </mat-cell>
        </ng-container>


        <ng-container matColumnDef="lastName">
          <mat-header-cell fxFlex="10%" *matHeaderCellDef mat-sort-header> Last Name </mat-header-cell>
          <mat-cell fxFlex="10%" *matCellDef="let row">  {{row.last_name}} </mat-cell>
        </ng-container>
...

【讨论】：

【解决方案3】：

只要[dataSource]="Observable<ReadOnlyArray>" 有效。提交 feat(table): allow data input to be array, stream (#9489) 似乎在 Angular 5.2 。目前，允许的类型为 DataSource<T> | Observable<ReadonlyArray<T> | T[]> | ReadonlyArray<T> | T[]。

【讨论】：

在 Angular 8 中试过这个，它在绑定到 Observable 时似乎可以工作。谢谢。
@HadidAli - ts 文件声明了一个 Observable<YourDataType[]> 类型的对象，并且您绑定到该对象：[dataSource]="yourObject"。
只要不需要排序就可以了，列的排序好像需要MatTableDataSource
使用这种 Observable 方法，如何实现全选/全选功能？
@Mackelito 好吧，这只是一种快速的展示方式，而不是完整的功能。