角2排序和过滤 [英] angular 2 sort and filter

问题描述

在Angularjs 1是可能的排序和过滤的方式如下：

In Angularjs 1 it is possible to sort and filter the following way:

<ul ng-repeat="friend in friends | filter:query | orderBy: 'name' ">
   <li>{{friend.name}}</li>
</ul>

但我无法找到如何做到这一点的Angularjs 2.0的例子。我的问题是如何排序和Angularjs 2.0过滤器？如果仍然不支持，没有人知道何时或是否会投入Angularjs 2.0？

But I could not find any examples of how to do this in Angularjs 2.0. My question is how to sort and filter in Angularjs 2.0? If it is still not supported, does anyone know when or if it will be put into Angularjs 2.0?

推荐答案

这是不添加开箱即用，因为角团队希望角2才能运行精缩。排序依据逃跑反射它与微小打破了。请查看 MISKO Heverey的回应对此事的。

This isn't added out of the box because the Angular team wants Angular 2 to run minified. OrderBy runs off of reflection which breaks with minification. Check out Miško Heverey's response on the matter.

我已经采取了创建支持单和多维数组的排序依据管道的时间。它也支持能够排序的多维阵列的多个列。

I've taken the time to create an OrderBy pipe that supports both single and multi-dimensional arrays. It also supports being able to sort on multiple columns of the multi-dimensional array.

<li *ngFor="#person of people | orderBy : ['-lastName', 'age']">{{person.firstName}} {{person.lastName}}, {{person.age}}</li>

这条管道确实允许渲染页面后添加更多的项目到数组中，并仍与新项​​目的阵列正确地排序。

This pipe does allow for adding more items to the array after rendering the page, and still sort the arrays with the new items correctly.

我有一个写上去在这个过程这里。

和这里的工作演示： http://fuelinteractive.github.io/燃料UI /＃/管材/排序依据和 https://plnkr.co/edit / DHLVc0 p =信息

And here's a working demo: http://fuelinteractive.github.io/fuel-ui/#/pipe/orderby and https://plnkr.co/edit/DHLVc0?p=info

编辑：增加了新的演示，以 http://fuelinteractive.github.io/燃料UI /＃/管材/排序依据

Added new demo to http://fuelinteractive.github.io/fuel-ui/#/pipe/orderby

这篇关于角2排序和过滤的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！