Angular2材质数据表分页

Question

我遵循了this教程，在Angular2项目中设置了带有分页和排序功能的物料数据表。 我设法将示例中的静态表数据与从httpService中获取的动态数据进行交换。数据在第一页上正确显示，但是当我尝试使用pagination按钮时，应用程序中断。

这是Chrome检查器向我显示的错误：

导致错误的代码部分是这样的：

connect(): Observable<Case[]> {
    // Combine everything that affects the rendered data into one update
    // stream for the data-table to consume.

    const dataMutations = [
      this.caseService.getCases(),
      this.paginator.page,
      this.sort.sortChange
    ];

    this.paginator.length = this.data.length;

    return merge(...dataMutations).pipe(map((rcvd: Case[]) => {
      this.paginator.length = rcvd.length;

      return this.getPagedData(this.getSortedData([...rcvd]));
    }));

  }

我从服务器收到的JSON数据如下：

[{"id":1,"patientid":1,"name":"Emil Bock","date":"11.11.2018","age":64,"sex":"M","modality":"CT","regions":"Head","diagnose":"undefined","evaluation":"undefined"},{"id":2,"patientid":2,"name":"Michael Schuhmacher","date":"10.11.2018","age":40,"sex":"M","modality":"CT","regions":"Hand","diagnose":"undefined","evaluation":"undefined"},{"id":3,"patientid":3,"name":"Silke Heeb","date":"16.11.2018","age":41,"sex":"F","modality":"MRI","regions":"Neck","diagnose":"undefined","evaluation":"undefined"},{"id":4,"patientid":4,"name":"Silivia Bach","date":"01.11.2018","age":31,"sex":"F","modality":"CT","regions":"CHEST","diagnose":"dg","evaluation":"undefined"},{"id":5,"patientid":5,"name":"Capitan Jack","date":"10.06.2025","age":51,"sex":"M","modality":"MRI","regions":"Brain","diagnose":"meningitis","evaluation":"undefined"},{"id":6,"patientid":6,"name":"Britney Spears","date":"17.11.2018","age":34,"sex":"F","modality":"CT","regions":"Leg","diagnose":"Fracture","evaluation":"undefined"},{"id":7,"patientid":7,"name":"James Bond","date":"23.11.2018","age":53,"sex":"M","modality":"MRI","regions":"Thorax","diagnose":"dg","evaluation":"undefined"},{"id":8,"patientid":8,"name":"Fred Feuerstein","date":"26.11.2018","age":45,"sex":"M","modality":"CT","regions":"Brain","diagnose":"dg","evaluation":"undefined"},{"id":9,"patientid":9,"name":"Mustafa Machmut","date":"10.11.2018","age":41,"sex":"M","modality":"CT","regions":"Brain","diagnose":"dg","evaluation":"undefined"},{"id":10,"patientid":11,"name":"Mareike Musterfrau","date":"08.11.2018","age":31,"sex":"F","modality":"Xray","regions":"Hip","diagnose":"d","evaluation":"undefined"},{"id":11,"patientid":10,"name":"Daniel Lupus","date":"13.11.2018","age":16,"sex":"M","modality":"CT","regions":"Arm","diagnose":"d","evaluation":"undefined"},{"id":12,"patientid":12,"name":"Sebastian Gheroge","date":"02.11.2018","age":64,"sex":"M","modality":"Xray","regions":"Head","diagnose":"d","evaluation":"undefined"},{"id":13,"patientid":13,"name":"Maria Crisan","date":"06.11.2018","age":48,"sex":"F","modality":"CT","regions":"Pelvis","diagnose":"d","evaluation":"undefined"},{"id":14,"patientid":14,"name":"Titus Pavel","date":"15.11.2018","age":48,"sex":"M","modality":"CT","regions":"Arm","diagnose":"d","evaluation":"undefined"},{"id":15,"patientid":15,"name":"Mister Milkey","date":"13.11.2018","age":33,"sex":"M","modality":"CT","regions":"Knee","diagnose":"d","evaluation":"undefined"}]

案例Case界面如下：

export interface Case {
  patientid: number;
  name: string;
  date: string;
  age: number;
  sex: string;
  modality: string;
  regions: string;
  diagnose: string;
  evaluation: string;
}

经过数小时的研究，我对如何对数据表实现分页一无所知。我希望从一些更有经验的人那里得到一些指导。预先感谢！

此处显示一个git repo，它显示数据表并在使用分页按钮时重现错误：angular-material-datatable