对角度为2的html表格进行排序

问题描述:

我有一个要求,我需要在每次按升序排列时对表格的每一列进行排序。应用的逻辑是用于在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

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

不排序即使我用下面的代码,该行为不会改变 selectedData.sort(功能(A,B){ 如果(isDesc){ 回报parseFloat (a.fndgSmssBchId) - parseFloat(b.fndgSmssBchId);} 其他 { 回报parseFloat(b.fndgSmssBchId) - parseFloat(a.fndgSmssBchId);} } ) – DP3