在上文中我們介紹了如何使用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組件。排序我們希望用戶有兩個按鈕通過升序和降序的價格來訂購產品如上文中所述sort()方法有助于對數組中的元素進行適當排序并返回排序后的數組。默認情況下它按字母和升序將元素作為字符串排序我們希望對價格進行排序。我們可以提供一個自定義排序函數以不同的順序對元素進行排序。首先打開app.component.ts并創建sortProductsAsc方法使用sort()方法將價格按升序排列傳遞函數(a, b) a.price - b.price)進行升序排序。要按降序排序請添加另一個方法sortProductsDesc并將排序函數中的比較值更改為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); }接下來添加兩個按鈕來允許用戶進行升序和降序排序并將單擊事件與方法鏈接起來。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 forfilterFilter By Name: /label input idfilter typetext #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 classcategory *ngForlet 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進行聚合和分組有助于處理具有小屬性和不復雜組合的對象。