Angular调用ASP.NET Core API返回数组按sequence升序排序失效问题

问题根因 #

你的代码出现排序不生效的问题主要有3个核心错误：

• 异步执行顺序错误：HTTP请求是异步操作，subscribe的回调函数只会在接口响应返回后才执行，而你写的排序、return代码是同步逻辑，运行时会先执行return语句，此时this.navigations还没有被接口返回的新值赋值，排序操作自然不会作用于最新的接口数据。
• 方法返回类型不匹配：你声明的方法返回类型是Observable<INavigation>，但实际返回的是INavigation[]数组，类型定义完全不匹配。
• 排序逻辑写反：b.sequence - a.sequence实现的是降序排列，要实现升序需要调整为a.sequence - b.sequence。

修复方案 #

最符合Angular异步编程最佳实践的修改方式是直接返回处理后的Observable流，在调用方订阅获取排序后的数据：

// 注意返回类型修正为Observable<INavigation[]>
getData(): Observable<INavigation[]> {
  const apiNavigation: string = environment.apiAddress + 'Navigation';
  return this.repository.getData(apiNavigation).pipe(
    // 提前导入rxjs的map操作符
    map(response => {
      const navigations = response as INavigation[];
      // 按sequence字段升序排序
      return navigations.sort((a, b) => a.sequence - b.sequence);
    })
  );
}

调用处示例：

// 调用时订阅获取排序后的数据
this.getData().subscribe(sortedNavList => {
  this.navigations = sortedNavList;
  // 拿到处理后的数据再执行后续渲染、赋值逻辑
});

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