angular 4.4: 无法按 table 的某些列排序

Question

我想按内容对 table 进行排序，我有几个列，排序代码对其中一些有效，但在其余部分，排序代码不起作用。

我从 API 休息中获取数据。数据获取正确，并在table中正确显示。

首先我有 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
}]

然后我像这样在 table 上显示它们：

<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>

table 就像：

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

而table组件中的排序代码为：

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 错误，显然它有效，但是当我尝试按某些列点对数据进行排序时，顺序仍然是初始顺序。

为什么不按点列排序？

编辑： 一个有效的 stackblitz 复制了这个问题： https://stackblitz.com/edit/angular-cruuo3

编辑 2： 我在 stackblitz 中添加了更多学生和另一列 'level' 进行排序。 'Level' 工作正常，因为 'id' 和 'name'.

Answer 1

试试这个代码，它是有效的：

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

问题出在 forEach 回调函数 return 值，但是 foreach parnt return 一个空值。

例如对有效，因为在不使用回调函数

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

angular 4.4: 无法按 table 的某些列排序

angular 4.4: can't sort by some columns of a table

angular

html-table

angular-material

tablesorter