Angular中如何按ID降序排序嵌套结构的JSON数据？

你的JSON数据结构有点特殊：数组里的每个元素都是仅包含单个键值对的对象，这个键就是你要排序的ID（"37"、"46"、"47"）。下面提供两种贴合需求的实现方式：

方案一：订阅数据后直接排序（无需自定义管道） #

这种方式更直接，在获取到数据后立即处理排序逻辑，不用额外创建管道。修改你的ngOnInit代码即可：

ngOnInit(): void {
  Observable.timer(0, 60000)
    .flatMap(() => this.http.get<any>(this.dataUrl))
    .subscribe(data => {
      // 对数据按ID降序排序
      this.incidents = data.sort((a, b) => {
        // 提取每个对象的唯一键（即ID）并转为数字
        const idA = parseInt(Object.keys(a)[0], 10);
        const idB = parseInt(Object.keys(b)[0], 10);
        // 降序排序：用b的ID减去a的ID
        return idB - idA;
      });
      console.log(this.incidents);
    });
}

之后在模板里直接使用*ngFor即可：

<div *ngFor="let incident of incidents">
  <!-- 这里写你的内容渲染逻辑 -->
</div>

方案二：自定义orderby管道（符合你提到的模板用法） #

如果你想通过模板管道的方式实现排序，可以创建一个自定义Angular管道：

1. 首先生成管道文件：

ng generate pipe orderby

2. 修改orderby.pipe.ts的transform方法，实现排序逻辑：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'orderby'
})
export class OrderbyPipe implements PipeTransform {
  transform(value: any[]): any[] {
    // 空数据直接返回，避免报错
    if (!value || value.length === 0) {
      return value;
    }
    // 按ID降序排序
    return value.sort((a, b) => {
      const idA = parseInt(Object.keys(a)[0], 10);
      const idB = parseInt(Object.keys(b)[0], 10);
      return idB - idA;
    });
  }
}

3. 记得在对应的模块的declarations数组中声明这个管道，确保Angular能识别它。

4. 最后在模板里使用管道：

<div *ngFor="let incident of incidents | orderby">
  <!-- 这里写你的内容渲染逻辑 -->
</div>

关键注意点 #

• 必须把ID字符串转为数字后再比较：如果直接用字符串排序，虽然当前的"47">"46">"37"是对的，但如果遇到类似"100"和"99"的情况，字符串排序会得到"100"<"99"，转数字就能避免这个不符合预期的结果。
• 两种方案都能适配异步数据：因为排序逻辑都是在数据加载完成后执行的，不会出现空数据排序的问题。

内容的提问来源于stack exchange，提问作者Stina Gerard