Question

我想按表的内容对表进行排序，我有几列，排序代码在其中一些上起作用，但在其他情况下，排序代码不起作用。

我从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：我向堆栈闪电战中添加了更多学生，并添加了另一个带有“级别”的列进行排序。 “级别”可以正常工作，如“ 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 回调函数的返回值中，但是foreach父对象返回一个空值。

例如用于，因为没有使用回叫功能

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

角度4.4：无法按表格的某些列排序

1 个答案: