如何将 Angular Material Table 组件与 Paginator 集成到后端？答案

【问题标题】：How to use Angular Material Table Component with Paginator integrated to back-end?如何将 Angular Material Table 组件与 Paginator 集成到后端？
【发布时间】：2017-07-30 21:10:12
【问题描述】：

我有一个Angular Material Table Component，我想将它与我的后端服务器集成。我可以为我的数据源之外的初始请求执行此操作。

我正在我的DataSource 中实现connect 方法，但我没有成功通过此方法从后端获取数据。这是正确的方法吗？如果是，我该如何实施？如果不是，从我的数据源中的服务器获取数据的最佳方法是什么？以下最后一次尝试导致无限循环将数据添加到我的表中

  connect(): Observable<any> {
    const displayDataChanges = [
      this._exampleDatabase.dataChange,
      this._paginator.page,
      this._sort.mdSortChange
    ];

    return Observable.merge(...displayDataChanges).map(() => {
      let currentData = null;

      const startIndex = this._paginator.pageIndex * this._paginator.pageSize;

      return this.studentService.query()
        .subscribe(data => {
          currentData = data.students;
          return currentData;
        });

    });
  }

【问题讨论】：

标签： angular angular-material2

【解决方案1】：

我终于找到了解决办法。

connect(): Observable<Student[]> {
    //events to listen
    const displayDataChanges = [
      this._sort.mdSortChange,
      this._paginator.page,
      this._filterChange,
    ];

    // If the user changes the sort order, reset back to the first page.
    this._sort.mdSortChange.subscribe(() => {
      this._paginator.pageIndex = 0;
    });

    return Observable.merge(...displayDataChanges)
      .startWith(null)
      .switchMap(() => {
        //call the service method which should return the data
        return this.studentService.query(this._paginator.pageIndex);
      })
      .catch(() => {
        // Catch exceptions
        return Observable.of(null);
      })
      .map(result => {
        // Flip flag to show that loading has finished.
        this.isLoadingResults = false;
        return result;
      })
      .map(result => {
        if (!result) { return []; }

        //set results length (for pagination reasons)
        this.resultsLength = result.tableData.total;

        //return fetched data
        return result.students;
      });

  }

【讨论】：