角度 2 排序和过滤

问题描述

在 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?

推荐答案

这不是开箱即用的，因为 Angular 团队希望 Angular 2 运行缩小.OrderBy 运行的反射会破坏缩小.查看 Miško 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.

我花时间创建了一个支持单维和多维数组的 OrderBy 管道.它还支持能够对多维数组的多列进行排序.

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="let 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/Fuel-ui/#/pipe/orderby 和 https://plnkr.co/edit/DHLVc0?p=info

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/添加了新演示Fuel-ui/#/pipe/orderby

编辑 2:将 ngFor 更新为新语法

EDIT 2: Updated ngFor to new syntax

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