以角度2排序html表的列

时间:2017-08-14 14:00:22

标签: javascript angular sorting

我有一个要求,每次按升序点击时,我需要对表的每一列进行排序。应用的逻辑是在Javascript中进行排序的一般逻辑。它在所有场景中都能正常工作,除非数据在列中出现不同的数字。

代码是

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

2 个答案:

答案 0 :(得分:1)

来自MDN docs

  

如果未提供compareFunction,则通过转换对元素进行排序   它们以字符串形式并以Unicode代码点顺序比较字符串。对于   例如,&#34;香蕉&#34;来到&#34; cherry&#34;之前。在数字排序中,9来了   在80之前,但因为数字被转换为字符串,&#34; 80&#34;来   之前&#34; 9&#34;按Unicode顺序。

鉴于在这里提供的代码,您将参数作为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方法为了像数字一样对待:.sort( (a,b) => { return a-b } )。然后你得到结果:717613,844401,76574893632,6304420005555

我已经在plunkr上here为你做了一个实现。

希望现在更清楚了。如果您还有其他问题,请不要犹豫。

答案 1 :(得分:0)

检查以确保您正在使用正确解析为整数而不是字符串的值进行数字比较。以字符串形式比较两个数字不一定会产生您期望的结果。