2017-08-14 61 views
0

我有一個要求,我需要在每次按升序排列時對錶格的每一列進行排序。應用的邏輯是用於在Javascript中排序的一般邏輯。在所有情況下都能正常工作,除非數據與列中的數字不同。對角度爲2的html表格進行排序

的代碼是

import { Pipe, PipeTransform } from '@angular/core'; 

@Pipe({ 
    name: 'orderBy' 
}) 
export class OrderByPipe implements PipeTransform { 

    transform(records: Array<any>, args?: any): any { 

    return records.sort(function(a, b){ 

     if(a[args.property] === null){ 
     return 1 * args.direction; 
     } 
     else if(b[args.property] === null){ 
     return -1 * args.direction; 
     } 
     else if(a[args.property] < b[args.property]){ 
     return -1 * args.direction; 
     } 
     else if(a[args.property] > b[args.property]){ 
     return 1 * args.direction; 
     } 
     else{ 
     return 0; 
     } 
    }); 
    }; 

} 

當我像844401,76574893632,717613數據上面的代碼失敗,6304420005555

它上面,雖然它應該844401之前排序76574893632列出的順序排序值

+1

作爲一個方面,角度團隊不鼓勵使用管道進行過濾或排序。你可以閱讀更多[這裏](https://angular.io/guide/pipes#appendix-no-filterpipe-or-orderbypipe)。 – BogdanC

+0

那麼你怎麼排序 – DP3

+0

在你的組件。根據您的需要,您可以從服務中接收數組並對其進行排序,或者如果它已經顯示,並且您希望點擊命令,則可以將該數組排序,然後重新排序。 – BogdanC

回答

1

MDN docs

如果未提供的compareFunction,元件由以Unicode碼點順序轉換 它們串和比較字符串排序。例如, 例如,「香蕉」出現在「櫻桃」之前。在數字排序中,9在80之前出現 ,但由於數字被轉換爲字符串,「80」在Unicode順序的「9」之前來到 。

鑑於此處提供的代碼,你需要爲參數any類型的數組的事實,我不能告訴你提供給管什麼,這是留給你要弄清楚。

但是,我將解釋你,你有什麼可能性:

  • 你在["844401", "76574893632", "717613", "6304420005555"]形式供給線的陣列,並應用在其上.sort(),其結果將是6304420005555,717613,76574893632,844401

  • 您提供的數組形式爲[844401, 76574893632, 717613, 6304420005555],您對其應用.sort(),它會將它們視爲Unicode值,從而導致對字符串應用排序,結果將與以前相同:6304420005555,717613,76574893632,844401

  • 第三個,我假設你正在尋找的是提供一個[844401, 76574893632, 717613, 6304420005555]形式的數字數組,然後你必須使用提供的compareFunction來應用排序方法,以便被對待號碼:.sort((a,b) => { return a-b })。然後,你必須結果:717613,844401,76574893632,6304420005555

我已經plunkr here提出的實現爲您服務。

希望它現在更清晰。如果您還有其他問題,請不要猶豫。

+1

這是什麼,解釋了爲什麼它突然表現。感謝您的詳細回覆。 – DP3

0

檢查以確保您的數字比較正在使用正確解析爲整數而不是字符串的值完成。以字符串形式比較兩個數字不一定會產生您期望的結果。

+0

不排序即使我用下面的代碼,該行爲不會改變 selectedData.sort(功能(A,B){ 如果(isDesc){ 回報parseFloat (a.fndgSmssBchId) - parseFloat(b.fndgSmssBchId);} 其他 { 回報parseFloat(b.fndgSmssBchId) - parseFloat(a.fndgSmssBchId);} } ) – DP3