バックエンドにPaginatorを組み込んだAngular Material Table Componentの使い方は？

Question

私はAngular Material Table Componentを持っています。バックエンドサーバと統合したいと思っています。 DataSource以外の最初のリクエストではそれを実行できます。

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

    }); 
    } 

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

    }