如何创建一个数据交互的Angular应用程序？这个工具不要错过！（二）

在上文中我们介绍了如何使用Kendo UI for Angular完成一个Angular应用的数据交互功能创建其中涉及到了内置的数据方法、场景等本文将继续介绍剩下的部分。PS给大家推荐一个实用组件~Kendo UI for Angular是专业级的Angular UI组件库不仅是将其他供应商提供的现有组件封装起来telerik致力于提供纯粹高性能的Angular UI组件而无需任何jQuery依赖关系。无论您是使用TypeScript还是JavaScript开发Angular应用程序Kendo UI for Angular都能为Angular项目提供专业的、企业级UI组件。排序我们希望用户有两个按钮通过升序和降序的价格来订购产品如上文中所述sort()方法有助于对数组中的元素进行适当排序并返回排序后的数组。默认情况下它按字母和升序将元素作为字符串排序我们希望对价格进行排序。我们可以提供一个自定义排序函数以不同的顺序对元素进行排序。首先打开app.component.ts并创建sortProductsAsc方法使用sort()方法将价格按升序排列传递函数(a, b) a.price - b.price)进行升序排序。要按降序排序请添加另一个方法sortProductsDesc并将排序函数中的比较值更改为b.price - a.price。在App.component.tspublic sortProductsDesc(): void { this.products this.products.sort((a, b) a.price - b.price); } public sortProductsAsc() { this.products this.products.sort((a, b) b.price - a.price); }接下来添加两个按钮来允许用户进行升序和降序排序并将单击事件与方法链接起来。button (click)sortProductsAsc()Sort Asc/button button (click)sortProductsDesc()Desc Desc/button保存浏览器就会重新加载当您单击排序方法时它将按价格的降序和升序排列产品。过滤数据我们允许用户按名称过滤产品filter()方法帮助根据特定条件过滤数组的元素并返回一个新数组其中只包含通过所提供函数实现的测试元素。首先我们创建函数filterBy它需要UI的值。如果过滤器有一个值那么nameInput就有一个值并且过滤器方法更新产品列表。filterBy(nameInput: HTMLInputElement) { if (nameInput.value) { this.products this.products.filter(p p.name nameInput.value) } }在app.component.html中使用模板引用变量#filterValue添加一个输入并添加一个按钮来调用filterBy方法来传递模板引用以获得对输入值的访问权。... label forfilterFilter By Name: /label input idfilter typetext #filterValue button (click)filterBy(filterValue)Filter/button保存浏览器就会重新加载输入一个产品名称并单击筛选按钮来查看结果。分组数据我们想按类别列出一个包含产品组的新部分reduce()方法有助于根据特定属性对数组的元素进行分组并返回一个对象该对象具有数组中每个唯一值的键对应的值是匹配的元素数组。因为我们希望产品组有一个清晰的结构所以首先在app.component.ts中创建一个新接口interface groupeByCategory { category: string; products: any; }接下来声明一个groupByCategory类型的新数组categories: groupByCategory[] [];创建一个新方法showGroup;在内部使用reduce()方法循环遍历products数组并为每个唯一类别创建一个带有键的对象。如果一个键在accumulator对象中不存在则创建该键并为其赋值一个空数组然后将当前产品推入与相应键相关联的数组。最后使用Object.keys将每个类别和产品分配给类别数组。最后的代码showGroup() { //First, group the products by category const group this.products.reduce((acc: any, curr) { let key curr.category; if (!acc[key]) { acc[key] []; } acc[key].push(curr); return acc; }, {}); //Get the categories and product related. this.categories Object.keys(group ).map(key ({ category: key, products: group[key] })); }添加按钮来按类别显示产品组列表。button (click)showGroup()Show Group/button接下来使用ngFor访问每个类别并将产品列表传递给list-product组件。div classcategory *ngForlet item of categories h2{{item.category}}/h2 app-list-products [products]item.products/app-list-products /div保存浏览器重新加载并单击show组它按类别显示一个新的产品列表。聚合数据如果想知道所有产品的总价reduce()函数帮助将数组中的元素聚合为单个值因此我们可以使用它对price属性求和。在app.component.ts中添加一个以0.00开头的新属性total来存储所有产品的总和。接下来添加新方法showTotal该方法使用reduce函数累积所有属性的价格值。total 0.00; showTotal() { this.total this.products.reduce((acc, curr) acc curr.price, 0); }在app.component.html渲染中添加一个新按钮来显示total属性。将按钮click绑定到showTotal方法并使用插值渲染total属性。button (click)showTotal() Total of all products/button {{total}}保存然后浏览器重新加载。当你点击新的按钮它会显示所有产品的总数何时使用数组方法关于为什么以及何时使用Array方法我们强调几点。Filter方法在概念验证和最小实现方面工作得很好。对于没有太多属性的字符串和数据排序工作得非常好。使用reduce进行聚合和分组有助于处理具有小属性和不复杂组合的对象。