在上文中（點擊這里回顧>>），我們介紹了如何使用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組件。

Kendo UI新版下載

排序

我們希望用戶有兩個按鈕通過升序和降序的價格來訂購產品，如上文中所述，sort()方法有助于對數組中的元素進行適當排序，并返回排序后的數組。默認情況下，它按字母和升序將元素作為字符串排序，我們希望對價格進行排序。

我們可以提供一個自定義排序函數，以不同的順序對元素進行排序。

首先打開app.component.ts并創建sortProductsAsc方法，使用sort()方法將價格按升序排列，傳遞函數(a, b) => a.price - b.price)進行升序排序。

要按降序排序，請添加另一個方法sortProductsDesc，并將排序函數中的比較值更改為b.price - a.price。在App.component.ts：

public 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 for="filter">Filter By Name: </label>
<input id="filter" type="text" #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 class="category" *ngFor="let 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進行聚合和分組有助于處理具有小屬性和不復雜組合的對象。

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