Angular 中如何将 Object 或者 Array 按序排列？

注意：
Angular 不再提倡使用管道，因为
(a) 它们性能堪忧
(b) 它们会阻止比较激进的代码最小化(minification)。

无论是 filter 还是 orderBy 都需要它的参数引用对象型属性。这样的管道必然是非纯管道，并且 Angular 会在几乎每一次变更检测周期中调用非纯管道。

过滤、特别是排序是昂贵的操作。当 Angular 每秒调用很多次这类管道函数时，即使是中等规模的列表都可能严重降低用户体验。
建议：
把你的过滤和排序逻辑挪进组件本身。组件可以对外暴露一个 filteredHeroes 或 sortedHeroes 属性，这样它就获得控制权，以决定要用什么频度去执行其它辅助逻辑。你原本准备实现为管道，并在整个应用中共享的那些功能，都能被改写为一个过滤/排序的服务，并注入到组件中。

前言

写前端的时候难免遇到数据展示问题，比如 form 表单，在使用 FormBuilder 来生成表单控件时，当 input 输入框较多的时候，我们可能希望能够自主控制表单字段顺序，此时，则需要对表单字段进行排序。那么，如何实现呢？

使用内置 orderBy

<li ng-repeat="item in items | orderBy:'color'">{{ item.color }}</li>

参见AngularJS orderBy 使用要点 - 佣工 7001 - 博客园

没有 orderBy 怎么办

从 Angular 开始 orderBy 不再支持，此时无法直接使用。
update附录：没有 FilterPipe 或者 OrderByPipe

使用开源包 ngx-order-pipe

如果不考虑性能问题，可以使用这样的方式：
参见 Angular 5+ Order Pipe
这个包可以实现列表式数据的排序，具体用法参见文档。
注意：可能遇到The pipe 'orderBy' could not be found错误，这个可以翻阅 issue 解决，我自己的实践是放在使用的组件的上一层级目录下面。如图：

自定义 pipe 造轮子

参见 angular2 自定义 pipe ，orderby 实现排序JavaScript兰色的 fire-CSDN 博客

如果返回的值是 Object 怎么办

使用 KeyValuePipe 组件。参考Angular 6 - KeyValue Pipe - *ngFor Loop through Object, Map example » grokonez

将 Object 遍历，然后排序放到列表中，代码参见：

app.filter('orderObjectBy', function() {
  return function(items, field, reverse) {
    var filtered = [];
    angular.forEach(items, function(item) {
      filtered.push(item);
    });
    filtered.sort(function (a, b) {
      return (a[field] > b[field] ? 1 : -1);
    });
    if(reverse) filtered.reverse();
      return filtered;
  };
});