当我们构建带有数据的应用程序时需要为客户提供排序、分组、过滤和聚合数据等选项以便与之交互。我们可以通过多种途径实现这一目标使用内置的Array对象——它提供了过滤器、排序方法和reduce等用于分组和聚合的功能。使用Kendo UI for Angular强大的数据查询功能——它提供了一系列方便且对开发人员友好的功能帮助我们处理数据操作比如排序、过滤、分组和聚合。因为我们已经了解了JavaScript所以在本文中将使用内置的Array方法。对于大多数开发人员来说这是一个很好的选择。PS给大家推荐一个实用组件~Kendo UI for Angular是专业级的Angular UI组件库不仅是将其他供应商提供的现有组件封装起来telerik致力于提供纯粹高性能的Angular UI组件而无需任何jQuery依赖关系。无论您是使用TypeScript还是JavaScript开发Angular应用程序Kendo UI for Angular都能为Angular项目提供专业的、企业级UI组件。首先让我们学习一下数组方法内置数组方法Array对象提供了排序和过滤操作的方法但是对于分组和聚合数据我们需要使用reduce()方法分别解释一下数组的sort()方法返回排序后的数组。默认情况下它按字母和升序将元素作为字符串排序我们必须提供一个比较函数来按自定义顺序对元素进行排序。filter()方法返回一个新数组其中只包含通过所提供函数实现测试的元素。reduce()方法帮助我们进行分组和聚合对于分组它接受一个累加器函数并遍历数组返回一个对象该对象对数组中的每个唯一值都有键对应的值是与键匹配的元素数组。对于聚合它采用一个累加器函数该函数跟踪运行总数或任何其他聚合值。它调用数组中的每个元素结果是最终的累积值。因为我们已经知道这些方法所以将解决下面的场景并找到复杂和高级主题的限制。场景我们所在的公司想要一个带有产品列表的Angular应用用户希望对数据进行过滤、分组、排序和聚合经理想要尽快发布所有这些功能。构建项目开始使用Angular CLI构建项目您可以使用以下命令安装它npm install -g angular/cli安装好Angular CLI后运行以下命令创建项目ng new angular-play-with-data当被Angular CLI提示是否要添加路由时选择“No”。另外选择“CSS”作为首选样式表格式。现在我们的应用程序已经创建好了导航到目录cd angular-play-with-data继续删除app.component.html中的示例标记和以下标记h1Working With Data in Angular/h1打开app.component.ts用示例数据添加属性productproducts [ { id: 1, name: Product 1, category: Category A, description: Description of product 1, price: 9.99 }, { id: 2, name: Product 2, category: Category B, description: Description of product 2, price: 19.99 }, { id: 3, name: Product 3, category: Category A, description: Description of product 3, price: 29.99 }, { id: 4, name: Product 4, category: Category C, description: Description of product 4, price: 39.99 }, { id: 5, name: Product 5, category: Category B, description: Description of product 5, price: 49.99 }, { id: 6, name: Product 6, category: Category A, description: Description of product 6, price: 59.99 }, { id: 7, name: Product 7, category: Category C, description: Description of product 7, price: 69.99 }, { id: 8, name: Product 8, category: Category B, description: Description of product 8, price: 79.99 }, { id: 9, name: Product 9, category: Category A, description: Description of product 9, price: 89.99 }, { id: 10, name: Product 10, category: Category C, description: Description of product 10, price: 99.99 } ]基本的设置完成了接下来我们创建一个组件来呈现产品列表。产品列表在Angular CLI中我们将使用-t标志为内联模板创建list-products组件通过运行以下命令来防止创建html文件PS C:\Users\dany.paredes\Desktop\angular-play-with-data ng g c -t list-productsCREATE src/app/list-products/list-products.component.spec.ts (642 bytes)CREATE src/app/list-products/list-products.component.ts (229 bytes)CREATE src/app/list-products/list-products.component.css (0 bytes)用Input()装饰器添加属性products这样我们就可以从app.component.ts中获取产品列表并使用ngFor和插值添加模板。import { Component, Input } from angular/core; Component({ selector: app-list-products, template: div *ngForlet item of products h3{{ item.name }}/h3 p{{ item.description }}/p span{{ item.price | currency }}/span /div , }) export class ListProductsComponent { Input() products: any; }在app.component.html中使用app-list-products来显示产品列表。h2All Products/h2 app-list-products [products]products/app-list-products保存更改并使用ng -serve -o运行应用程序来自动打开浏览器。