时间戳

首页 > 解决方案 > Angular 6材料表示意图：如何从远程加载数据？

angular - Angular 6材料表示意图：如何从远程加载数据？

问题描述

我正在使用材料表示意图，但不知道如何

我认为重要的部分是文件中的connect()方法datasource.ts。this.data只是一个数组。

  /**
   * Connect this data source to the table. The table will only update when
   * the returned stream emits new items.
   * @returns A stream of the items to be rendered.
   */
  connect(): Observable<any[]> {
    // Combine everything that affects the rendered data into one update
    // stream for the data-table to consume.
    const dataMutations = [
      observableOf(this.data),
      this.paginator.page,
      this.sort.sortChange
    ];

    // Set the paginators length
    this.paginator.length = this.data.length;

    return merge(...dataMutations).pipe(
      map(() => {
        return this.getPagedData(this.getSortedData([...this.data]));
      })
    );
  }

如何更新this.data以使表格反映数据？我只需要加载一次数据。我希望过滤/排序等都在客户端完成。

我找到了这个指南，但它似乎有点矫枉过正，并且是在创建此原理图之前编写的。

this.data由于它包含在一个 中，是否有一些方法可以更新observableOf()？

标签： angularangular-materialobservableangular-material2angular2-observables

解决方案

我有同样的问题。dataSource.data = newData没有检测到更改observableOf(this.data),。

使用此线程中的解决方案对其进行了修复，并在此示例中显示。

您必须将其替换observableOf(this.data)为this.datastream. 因此，连接方法最终将如下所示：

connect(): Observable<DataTableItem[]> {
  const dataMutations = [
  this.dataStream,
  this.paginator.page,
  this.sort.sortChange

在类的开头，不是声明变量data: TableItem[] = EXAMPLE_DATA;，而是将其替换为：

dataStream = new BehaviorSubject<DataTableItem[]>(EXAMPLE_DATA);
set data(v: DataTableItem[]) { this.dataStream.next(v); }
get data(): DataTableItem[] { return this.dataStream.value; }

现在，您可以dataSource.data = newData使用任何新数据在任何地方调用，并且它可以正常工作。数据流检测到更改并更新表。问题是 this.data 的 observable 并没有真正检测到任何变化。数据流确实如此。

推荐阅读