3
私はこれに新しいので、私はサービスによって提供されるデータで自分のmdテーブルを実装することができました。今私はフィルター、並べ替えとページ機能を実装しようとしているが、私は何か間違っていると思う。サービスからmd-tableに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);
}
}
私は常にコンポーネントに接続()関数内で私の変更を実施し、多くのことを試してみました。私はサービスを変更すべきだと思っていますが。
私が直面してる問題はここにある私は思う:
const data = this.subject.data.slice();
なし「スライス」は、対象における、そしてもちろんのない「データ」はありません。
アイデア?私は正しい道にいますか?