Angular 如何从服务在md表中实现md paginator和md sort？

我是新手，我用服务提供的数据实现了我的md表。现在我正在尝试实现过滤、排序和分页功能，但我认为我做错了什么

这是我的组件：

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 = [];
  }
}

主题中没有“数据”，当然也没有“切片”

---

有什么想法吗？我走对了吗？

您的

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

这将解决您的问题

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

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