當(dāng)我們構(gòu)建帶有數(shù)據(jù)的應(yīng)用程序時(shí)，需要為客戶提供排序、分組、過(guò)濾和聚合數(shù)據(jù)等選項(xiàng)，以便與之交互。我們可以通過(guò)多種途徑實(shí)現(xiàn)這一目標(biāo)：

• 使用內(nèi)置的Array對(duì)象——它提供了過(guò)濾器、排序方法和reduce等用于分組和聚合的功能。
• 使用Kendo UI for Angular強(qiáng)大的數(shù)據(jù)查詢功能——它提供了一系列方便且對(duì)開發(fā)人員友好的功能，幫助我們處理數(shù)據(jù)操作，比如排序、過(guò)濾、分組和聚合。

因?yàn)槲覀円呀?jīng)了解了JavaScript，所以在本文中將使用內(nèi)置的Array方法。對(duì)于大多數(shù)開發(fā)人員來(lái)說(shuō)，這是一個(gè)很好的選擇。

PS：給大家推薦一個(gè)實(shí)用組件~Kendo UI for Angular是專業(yè)級(jí)的Angular UI組件庫(kù)，不僅是將其他供應(yīng)商提供的現(xiàn)有組件封裝起來(lái)，telerik致力于提供純粹高性能的Angular UI組件，而無(wú)需任何jQuery依賴關(guān)系。無(wú)論您是使用TypeScript還是JavaScript開發(fā)Angular應(yīng)用程序，Kendo UI for Angular都能為Angular項(xiàng)目提供專業(yè)的、企業(yè)級(jí)UI組件。

Kendo UI for jQuery新版下載

首先，讓我們學(xué)習(xí)一下數(shù)組方法：

內(nèi)置數(shù)組方法

Array對(duì)象提供了排序和過(guò)濾操作的方法，但是對(duì)于分組和聚合數(shù)據(jù)，我們需要使用reduce()方法，分別解釋一下：

數(shù)組的sort()方法返回排序后的數(shù)組。默認(rèn)情況下，它按字母和升序?qū)⒃刈鳛樽址判颍覀儽仨毺峁┮粋€(gè)比較函數(shù)來(lái)按自定義順序?qū)υ剡M(jìn)行排序。

filter()方法返回一個(gè)新數(shù)組，其中只包含通過(guò)所提供函數(shù)實(shí)現(xiàn)測(cè)試的元素。

reduce()方法幫助我們進(jìn)行分組和聚合：

• 對(duì)于分組，它接受一個(gè)累加器函數(shù)并遍歷數(shù)組，返回一個(gè)對(duì)象，該對(duì)象對(duì)數(shù)組中的每個(gè)唯一值都有鍵，對(duì)應(yīng)的值是與鍵匹配的元素?cái)?shù)組。
• 對(duì)于聚合，它采用一個(gè)累加器函數(shù)，該函數(shù)跟蹤運(yùn)行總數(shù)或任何其他聚合值。它調(diào)用數(shù)組中的每個(gè)元素，結(jié)果是最終的累積值。

因?yàn)槲覀円呀?jīng)知道這些方法，所以將解決下面的場(chǎng)景，并找到復(fù)雜和高級(jí)主題的限制。

場(chǎng)景

我們所在的公司想要一個(gè)帶有產(chǎn)品列表的Angular應(yīng)用，用戶希望對(duì)數(shù)據(jù)進(jìn)行過(guò)濾、分組、排序和聚合，經(jīng)理想要盡快發(fā)布所有這些功能。

構(gòu)建項(xiàng)目

開始使用Angular CLI構(gòu)建項(xiàng)目，您可以使用以下命令安裝它：

npm install -g @angular/cli

安裝好Angular CLI后，運(yùn)行以下命令創(chuàng)建項(xiàng)目：

ng new angular-play-with-data

當(dāng)被Angular CLI提示是否要添加路由時(shí)，選擇“No”。另外，選擇“CSS”作為首選樣式表格式。

現(xiàn)在我們的應(yīng)用程序已經(jīng)創(chuàng)建好了，導(dǎo)航到目錄：

cd angular-play-with-data

繼續(xù)刪除app.component.html中的示例標(biāo)記和以下標(biāo)記：

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

打開app.component.ts，用示例數(shù)據(jù)添加屬性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
}
]

基本的設(shè)置完成了，接下來(lái)我們創(chuàng)建一個(gè)組件來(lái)呈現(xiàn)產(chǎn)品列表。

產(chǎn)品列表

在Angular CLI中，我們將使用-t標(biāo)志為內(nèi)聯(lián)模板創(chuàng)建list-products組件，通過(guò)運(yùn)行以下命令來(lái)防止創(chuàng)建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中獲取產(chǎn)品列表，并使用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來(lái)顯示產(chǎn)品列表。

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

保存更改并使用ng -serve -o運(yùn)行應(yīng)用程序來(lái)自動(dòng)打開瀏覽器。

Telerik_KendoUI產(chǎn)品技術(shù)交流群：726377843    歡迎一起進(jìn)群討論