угловой 4.4: не может сортировать по некоторым столбцам таблицы - PullRequest
Новая
       43

угловой 4.4: не может сортировать по некоторым столбцам таблицы

0 голосов
/ 26 декабря 2018

Я хочу отсортировать таблицу по ее содержимому, у меня есть несколько столбцов, код сортировки работает на некоторых из них, но в остальном код сортировки не работает.

Я получаю данные изAPI отдых.Данные получены правильно и правильно отображаются в таблице.

Сначала у меня есть Students объект, и у меня есть Points объект.

Students похожи на: 

[{
  "id": 10000,
  "name": "Somebody",
  "points": {"1": 5, "2":0, "3": 10}
},{
  "id": 10001,
  "name": "JustAnother",
  "points": {"1":0, "2": 1, "3": 4}
}]

И Points объект выглядит так: 

[{
  "id": 1,
  "name": "foo",
  "value": 2
},
{
  "id": 2,
  "name": "bar",
  "value": 5
},
{
  "id": 3,
  "name": "baz",
  "value": 1
}]

Затем я отображаю их на столе следующим образом: 

<mat-card *ngIf="sortedData">
  <table matSort (matSortChange)="sortData($event)">
    <tr>
      <th mat-sort-header="id">Id</th>
      <th mat-sort-header="name">name</th>
      <th mat-sort-header="{{point.id}}" *ngFor="let point of Points">{{point.name}}</th>
    </tr>

    <tr *ngFor="let student of sortedData">
      <td>{{student.id}}</td>
      <td>{{student.name}}</td>
      <td *ngFor="let point of Points" class="center">
        {{student.points[point.id]}}
      </td>
    </tr>
  </table>
</mat-card>

таблица выглядит так: 

id    | name    | foo    | baz    | bar
------------------------------------------
10000 | Somebody| 5      | 0      | 10
10001 | JustAnot| 0      | 1      | 4

И код сортировки в компоненте таблицы: 

public sortedData: Student[];
this.sortedData = this.Students;  // <- this is inside the response of get students function.

sortData(sort: Sort) {
  const data = this.Students;
  if (!sort.active || sort.direction === '') {
    this.sortedData = data;
    return;
  }

  this.sortedData = data.sort((a, b) => {
    const isAsc = sort.direction === 'asc';
    const points_array = this.Points; // <- this.points contains the Points object
    if (sort.active === 'id') {
      return compare(a.id, b.name, isAsc);
    }
    if (sort.active === 'name') {
      return compare(a.name, b.name, isAsc);
    }
    Object.keys(points_array).forEach(
      function (index) {
        if (parseInt(points_array[index].id, 10) === parseInt(sort.active, 10)) {
          return compare(
            a['points'][ points_array[index].id ],
            b['points'][ points_array[index].id ],
            isAsc
          );
        }
      }
    );
  });
}

function compare(a: number | string, b: number | string, isAsc: boolean) {
  return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
}

У меня есть больше свойств и столбцов, это упрощено для примера.Все столбцы, такие как id или name, могут быть отсортированы без проблем.

Но точечные столбцы не могут быть отсортированы.Когда я нажимаю на один из этих столбцов, я выполняю сортировку, но порядок остается неизменным.

Если я регистрируюсь в функциях сортировки, я вижу, что сравнение выполнено, и ответ функции compareравно 0 или -1, то же самое, что столбцы, которые отсортированы правильно.

На консоли не возникает ошибка javascript, по-видимому, это работает, но когда я пытаюсь отсортировать данные по некоторым столбцамточка, порядок остается исходным.

Почему не выполняется сортировка по столбцам точек?

Редактировать: рабочий стек, повторяющий проблему: https://stackblitz.com/edit/angular-cruuo3

Редактировать 2: Я добавил к стеку еще несколько учеников и еще один столбец с «уровнем» для сортировки.«Level» работает нормально, как «id» и «name».

1 Ответ

0 голосов
/ 27 декабря 2018

Попробуйте этот код, это работа: 

return compare(a['points'][ points_array[parseInt(sort.active, 10)].id ], 
b['points'][ points_array[parseInt(sort.active, 10)].id ], isAsc);

проблема в forEach функция обратного вызова, но foreach parnt возвращает пустое значение.

дляпример для работает, потому что не используется функция обратного вызова 

for (const index of Object.keys(points_array)) { 
  if (parseInt(points_array[index].id, 10) === parseInt(sort.active, 10)) { 
    return compare( 
      a['points'][points_array[index].id], 
      b['points'][points_array[index].id], 
      isAsc 
    ); 
  } 
}
...