在上文中我們介紹了如何使用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組件。排序我們希望用戶有兩個按鈕通過升序和降序的價格來訂購產(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.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); }接下來添加兩個按鈕來允許用戶進(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 forfilterFilter By Name: /label input idfilter typetext #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 classcategory *ngForlet 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方法我們強調(diào)幾點。Filter方法在概念驗證和最小實現(xiàn)方面工作得很好。對于沒有太多屬性的字符串和數(shù)據(jù)排序工作得非常好。使用reduce進(jìn)行聚合和分組有助于處理具有小屬性和不復(fù)雜組合的對象。