如何使用角度材料表组件与Paginator集成到后端？

Question

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

我在我的DataSource中实现了方法connect，但是我没有成功地从这个方法的后端获取数据。这是正确的方法吗？如果是的话，我该如何执行它？如果不是，在我的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; 
     }); 

    }