當我們構建帶有數據的應用程序時，需要為客戶提供排序、分組、過濾和聚合數據等選項，以便與之交互。我們可以通過多種途徑實現這一目標：

• 使用內置的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組件。

Kendo UI for jQuery新版下載

首先，讓我們學習一下數組方法：

內置數組方法

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中的示例標記和以下標記：

<h1>Working With Data in Angular</h1>

打開app.component.ts，用示例數據添加屬性product：

products = [
{
"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-products
CREATE 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 *ngFor="let 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來顯示產品列表。

<h2>All Products</h2>
<app-list-products [products]="products"></app-list-products>

保存更改并使用ng -serve -o運行應用程序來自動打開瀏覽器。

Telerik_KendoUI產品技術交流群：726377843    歡迎一起進群討論