Question

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

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

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

  }

如何将Paginator集成到后端使用Angular Material Table组件？

1 个答案: