如何在Angular中按日期与Flag字段对表格进行排序？

示例数据JSON #

[
  {  
    "student": "A",
    "std": [ 
      { "cls": 3, "date": "26/12/2022", "flag": true },          
      { "cls": 2, "date": "16/11/2021", "flag": true },
      { "cls": 1, "date": "25/11/2020", "flag": false }
    ]
  },
  { 
    "student": "B",
    "std": [ 
      {"cls": 3, "date": "26/12/2022", "flag": false},
      {"cls": 2, "date": "16/11/2021", "flag": true },
      {"cls": 1, "date": "25/11/2020", "flag": false}
    ]
  }
]

当前Angular表格代码 #

<tbody>
  <ng-container *ngFor="let s of student">
    <tr *ngFor="let std of s.std" class="card-text">
      <td>               {{s.student}} </td>
      <td class="event"> {{std.cls}}   </td>
      <td class="venue"> {{std.date}}  </td>
      <td class="venue"> {{std.flag}}  </td>
    </tr>
  </ng-container>
</tbody>

需求 #

如何在Angular中实现表格按日期从新到旧，以及Flag值true在上、false在下排序？

期望输出 #

student  cls        date flag
A          3 26/12/2022  true
A          2 16/11/2021  true
B          2 16/11/2021  true
B          3 26/12/2022  false
A          1 25/11/2020  false 
B          1 25/11/2020  false 

解决方案 #

步骤1：扁平化嵌套数据 #

先把嵌套的std数组展开，将每个学生的每一条记录合并为独立对象，方便统一排序：

在组件的TypeScript代码中添加处理逻辑：

// 原始数据
studentData = [/* 你的示例JSON数据 */];

// 扁平化后的数组
flattenedStudents: any[] = [];

ngOnInit(): void {
  // 展开嵌套结构
  this.flattenedStudents = this.studentData.flatMap(student => 
    student.std.map(item => ({
      student: student.student,
      cls: item.cls,
      date: item.date,
      flag: item.flag
    }))
  );
  
  // 执行排序
  this.sortStudents();
}

步骤2：实现排序逻辑 #

添加排序函数，先按flag倒序（true优先级更高），再按日期倒序（新日期在前）：

sortStudents(): void {
  this.flattenedStudents.sort((a, b) => {
    // 优先按flag排序：true在前，false在后
    if (a.flag !== b.flag) {
      return a.flag ? -1 : 1;
    }
    
    // 再按日期排序：先把DD/MM/YYYY格式转为可解析的Date对象
    const dateA = new Date(a.date.split('/').reverse().join('-'));
    const dateB = new Date(b.date.split('/').reverse().join('-'));
    
    return dateB.getTime() - dateA.getTime();
  });
}

步骤3：修改模板代码 #

将模板中的循环对象替换为扁平化后的数组：

<tbody>
  <tr *ngFor="let item of flattenedStudents" class="card-text">
    <td>               {{item.student}} </td>
    <td class="event"> {{item.cls}}   </td>
    <td class="venue"> {{item.date}}  </td>
    <td class="venue"> {{item.flag}}  </td>
  </tr>
</tbody>

补充说明 #

• 日期转换：因为原日期格式是DD/MM/YYYY，直接用new Date()解析会出错，所以通过split('/').reverse().join('-')转为YYYY-MM-DD格式后再创建Date对象。
• 如果需要支持表头点击切换排序方向，可以扩展排序逻辑，增加排序字段和方向的控制变量。

内容的提问来源于stack exchange，提问作者nyla L