如何在服務的md表中實現md-paginator和md-sort？

我是新來的，我設法用服務提供的數據來實現我的md表。現在我試圖實現過濾器，排序和分頁功能，但我認爲我做錯了什麼。如何在服務的md表中實現md-paginator和md-sort？

這是我的組件：

import { Component, OnInit, ViewChild } from '@angular/core'; 
import { DataSource }   from '@angular/cdk'; 

import { Observable }   from 'rxjs/Observable'; 
import { BehaviorSubject } from 'rxjs/BehaviorSubject'; 
import { MdPaginator }  from '@angular/material'; 

import { Competition }  from '../../competition/competition'; 
import { CompetitionService } from '../../competition/competition.service' 

import 'rxjs/add/operator/startWith'; 
import 'rxjs/add/observable/merge'; 
import 'rxjs/add/operator/map'; 

@Component({ 
    selector: 'comp-table-cmp', 
    moduleId: module.id, 
    templateUrl: 'competitions-table.component.html', 
}) 

export class CompetitionsTableComponent{ 

    displayedColumns = ["compName", "compChamp", "compRunnerup"]; 
    dataSource: CompetitionsDatasource | null; 

    constructor(private competitionService: CompetitionService){ } 

    @ViewChild(MdPaginator) paginator: MdPaginator; 

    ngOnInit() { 
     this.dataSource = new CompetitionsDatasource(this.competitionService, this.paginator); 
     console.log(this.dataSource) 
    } 
} 

export class CompetitionsDatasource extends DataSource<any> { 
    constructor(private competitionService: CompetitionService, private paginator: MdPaginator) { 
    super(); 
    } 

    subject: BehaviorSubject<Competition[]> = new BehaviorSubject<Competition[]>([]); 
    get data(): Competition[] { return this.subject.value; } 

    connect(): Observable<Competition[]> { 
     const displayDataChanges = [ 
     this.competitionService.getCompetitions() 
      .then(res => { 
       this.subject.next(res); 
      }), 
     this.paginator.page, 
     ]; 
     return Observable.merge(this.subject).map(() => { 
      const data = this.subject.data.slice(); 

     // Grab the page's slice of data. 
     const startIndex = this.paginator.pageIndex * this.paginator.pageSize; 
     return data.splice(startIndex, this.paginator.pageSize); 
     }); 
    } 

    disconnect() { 
     this.subject.complete(); 
     this.subject.observers = []; 
    } 
}

這是提供數據的服務：

import { Injectable } from '@angular/core'; 
import { Headers, Http, RequestOptionsArgs, URLSearchParams } from '@angular/http'; 

import 'rxjs/add/operator/toPromise'; 

import { Competition } from './competition'; 
import { Match }   from '../match/match'; 

@Injectable() 
export class CompetitionService { 

    private headers = new Headers({'Content-Type': 'application/json'}); 
    private competitionsUrl = 'api/competitions'; // URL to web api 

    constructor(private http: Http) { } 

    getCompetitions(): Promise<Competition[]> { 
    let options: RequestOptionsArgs = {}; 
    let params = new URLSearchParams(); 
    params.append('size', '250'); 
    options.params = params; 
    return this.http.get(this.competitionsUrl,options) 
       .toPromise() 
       .then(response => response.json()._embedded.competitions as Competition[]) 
       .catch(this.handleError); 
    } 
}

我已經嘗試了很多東西，始終貫徹connect（）函數中我改變了組件。雖然我開始認爲我應該修改服務。

我面臨的問題是在這裏，我想：

const data = this.subject.data.slice();

沒有「數據」的話題，當然沒有「切片」。

任何想法？我在正確的道路上嗎？

來源

2017-08-05 Matias Diez

您從未調用過您的competitionService.getCompetitions()。

你應該合併displayDataChanges如下：

return Observable.merge(...displayDataChanges).map(() => { 
    const data = this.subject.data.slice(); 

    // Grab the page's slice of data. 
    const startIndex = this.paginator.pageIndex * this.paginator.pageSize; 
    return data.splice(startIndex, this.paginator.pageSize); 
    });

這將解決您的問題。

來源

2017-09-16 03:08:02

如何在服務的md表中實現md-paginator和md-sort？

回答

相關問題