Angular2 Материал DataTable Нумерация таблиц - PullRequest
Новая
       30

Angular2 Материал DataTable Нумерация таблиц

0 голосов
/ 13 ноября 2018

Я следовал этому учебнику , чтобы настроить материал с возможностью разбивки на страницы и сортировки в проекте Angular2. Мне удалось обменяться данными статической таблицы из примера с динамическими данными, полученными из httpService. Данные отображаются правильно для первой страницы, но когда я пытаюсь использовать кнопки pagination, приложение разрывается.

Это ошибка, которую показывает мне Chrome инспектор:

enter image description here

Часть кода, вызывающая ошибку, такова: 

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"}]

Корпус интерфейса выглядит так: 

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

После многих часов исследований я не знаю, как реализовать нумерацию данных. Я надеюсь на немного руководства от более опытного человека. Заранее спасибо!

Git-репо, которое отображает данные и воспроизводит ошибку при использовании кнопок нумерации страниц, доступно здесь: angular-material-datatable

...