如何使用 Angular Material Table 组件与分页集成到后端？

Question

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

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

  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;
        });

    });
  }

Answer 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;
      });

  }

如何使用 Angular Material Table 组件与分页集成到后端？

How to use Angular Material Table Component with Paginator integrated to back-end?

angular-material2

angular