在上文中（點擊這里回顧>>），我們介紹了如何使用Kendo UI for Angular完成一個Angular應(yīng)用的數(shù)據(jù)交互功能創(chuàng)建，其中涉及到了內(nèi)置的數(shù)據(jù)方法、場景等，本文將繼續(xù)介紹剩下的部分。

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

Kendo UI新版下載

排序

 我們希望用戶有兩個按鈕通過升序和降序的價格來訂購產(chǎn)品，如上文中所述，sort()方法有助于對數(shù)組中的元素進(jìn)行適當(dāng)排序，并返回排序后的數(shù)組。默認(rèn)情況下，它按字母和升序?qū)⒃刈鳛樽址判颍覀兿Ｍ麑r格進(jìn)行排序。

我們可以提供一個自定義排序函數(shù)，以不同的順序?qū)υ剡M(jìn)行排序。

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

要按降序排序，請?zhí)砑恿硪粋€方法sortProductsDesc，并將排序函數(shù)中的比較值更改為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);
}

接下來，添加兩個按鈕來允許用戶進(jìn)行升序和降序排序，并將單擊事件與方法鏈接起來。

<button (click)="sortProductsAsc()">Sort Asc</button>
<button (click)="sortProductsDesc()">Desc Desc</button>

保存，瀏覽器就會重新加載，當(dāng)您單擊排序方法時，它將按價格的降序和升序排列產(chǎn)品。

過濾數(shù)據(jù)

我們允許用戶按名稱過濾產(chǎn)品，filter()方法幫助根據(jù)特定條件過濾數(shù)組的元素，并返回一個新數(shù)組，其中只包含通過所提供函數(shù)實現(xiàn)的測試元素。

首先，我們創(chuàng)建函數(shù)filterBy，它需要UI的值。如果過濾器有一個值，那么nameInput就有一個值，并且過濾器方法更新產(chǎn)品列表。

filterBy(nameInput: HTMLInputElement) {
if (nameInput.value) {
this.products = this.products.filter(p => p.name === nameInput.value)
}
}

 在app.component.html中，使用模板引用變量#filterValue添加一個輸入，并添加一個按鈕來調(diào)用filterBy方法來傳遞模板引用以獲得對輸入值的訪問權(quán)。

...
<label for="filter">Filter By Name: </label>
<input id="filter" type="text" #filterValue>
<button (click)="filterBy(filterValue)">Filter</button>

保存，瀏覽器就會重新加載，輸入一個產(chǎn)品名稱并單擊篩選按鈕來查看結(jié)果。

分組數(shù)據(jù)

我們想按類別列出一個包含產(chǎn)品組的新部分，reduce()方法有助于根據(jù)特定屬性對數(shù)組的元素進(jìn)行分組，并返回一個對象，該對象具有數(shù)組中每個唯一值的鍵，對應(yīng)的值是匹配的元素數(shù)組。

因為我們希望產(chǎn)品組有一個清晰的結(jié)構(gòu)，所以首先在app.component.ts中創(chuàng)建一個新接口：

interface groupeByCategory {
category: string;
products: any;
}

接下來，聲明一個groupByCategory類型的新數(shù)組：

categories: groupByCategory[] = [];

創(chuàng)建一個新方法showGroup;在內(nèi)部，使用reduce()方法循環(huán)遍歷products數(shù)組，并為每個唯一類別創(chuàng)建一個帶有鍵的對象。如果一個鍵在accumulator對象中不存在，則創(chuàng)建該鍵并為其賦值一個空數(shù)組，然后將當(dāng)前產(chǎn)品推入與相應(yīng)鍵相關(guān)聯(lián)的數(shù)組。

最后使用Object.keys將每個類別和產(chǎn)品分配給類別數(shù)組。

最后的代碼：

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]
}));

}

添加按鈕來按類別顯示產(chǎn)品組列表。

<button (click)="showGroup()">Show Group</button>

接下來，使用ngFor訪問每個類別，并將產(chǎn)品列表傳遞給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組，它按類別顯示一個新的產(chǎn)品列表。

聚合數(shù)據(jù)

如果想知道所有產(chǎn)品的總價，reduce()函數(shù)幫助將數(shù)組中的元素聚合為單個值，因此我們可以使用它對price屬性求和。

在app.component.ts中添加一個以0.00開頭的新屬性total來存儲所有產(chǎn)品的總和。接下來，添加新方法showTotal，該方法使用reduce函數(shù)累積所有屬性的價格值。

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}}

保存，然后瀏覽器重新加載。當(dāng)你點擊新的按鈕，它會顯示所有產(chǎn)品的總數(shù)！

何時使用數(shù)組方法？

關(guān)于為什么以及何時使用Array方法，我們強(qiáng)調(diào)幾點。

• Filter方法在概念驗證和最小實現(xiàn)方面工作得很好。
• 對于沒有太多屬性的字符串和數(shù)據(jù)，排序工作得非常好。
• 使用reduce進(jìn)行聚合和分組有助于處理具有小屬性和不復(fù)雜組合的對象。

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