Angular中基于嵌套API返回结果实现对象数组升序排序

你当前的实现将详情请求分散在每个卡片子组件中，父组件仅持有ID列表，无法获取所有条目的score字段做全局排序。正确的实现思路是将详情请求逻辑上移到父组件层，批量拉取当前分页所需的全量详情数据，排序完成后再传给子组件渲染，不要让子组件自行发起详情请求。

• 第一步：改造父组件逻辑，引入RxJS的forkJoin并行拉取当前页的所有详情数据
  forkJoin会等待所有传入的请求完成后，把返回结果按请求顺序合并成数组返回，适合这类批量拉取场景，父组件参考代码如下：

  // 先引入所需RxJS工具
  import { forkJoin, take } from 'rxjs';
  
  // 组件内声明变量
  storyIds: number[] = [];
  sortedStoryItems: StoryItem[] = [];
  start = 0; // 原有分页起始参数保留
  end = 10; // 原有分页结束参数保留，按你的实际分页大小调整
  
  // 改造原有ID列表请求逻辑
  this.service.fetchStories()
    .pipe(take(1))
    .subscribe((res: number[]) => {
      this.storyIds = res;
      // 拿到ID列表后加载第一页数据
      this.loadCurrentPageData();
    });
  
  // 封装当前页数据加载、排序逻辑
  loadCurrentPageData() {
    // 截取当前分页需要的ID
    const currentPageIds = this.storyIds.slice(this.start, this.end);
    // 构造所有详情请求的可观察对象数组
    const detailRequests = currentPageIds.map(id => 
      this.service.fetchStoryItems(id).pipe(take(1))
    );
    // 等待所有详情请求返回后统一处理
    forkJoin(detailRequests).subscribe((resList: StoryItem[]) => {
      // 过滤掉返回undefined的无效条目
      const validItems = resList.filter(item => item !== undefined);
      // 按score字段升序排序，如需降序改为 b.score - a.score 即可
      this.sortedStoryItems = validItems.sort((a, b) => a.score - b.score);
    })
  }
  

  后续翻页修改start/end参数后，重新调用loadCurrentPageData()即可自动加载新页数据并完成排序。

• 第二步：改造父组件模板，直接遍历排序完成的详情数组，把完整数据传给卡片组件
  替换原有遍历ID的模板代码：

  <div *ngFor="let item of sortedStoryItems">
    <app-cards [data]="item"></app-cards>
  </div>
  

• 第三步：改造卡片子组件，移除自行发起详情请求的逻辑，直接接收父组件传入的完整数据
  子组件修改参考：

  import { Input } from '@angular/core';
  // 其他原有依赖导入保留
  
  // 新增输入属性接收父组件传入的详情数据
  @Input() data: StoryItem;
  
  // 删掉原有的ngOnInit生命周期里调用fetchStoryItems的所有相关代码，直接使用this.data渲染模板即可
  

• 并行请求的效率远高于子组件各自串行发起请求，常规单页10-20条的分页场景下不会有性能问题；如果单页条目数超过50，可以再加RxJS并发控制操作符限制同时发起的请求数。
• 所有涉及跨条目的全局操作（排序、过滤、搜索），都要把数据持有逻辑放在共同的父层，不要分散在子组件中维护，否则无法实现统一处理。

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