javascript - 在 Angular 2 中对 html 表的列进行排序

Question

我有一个要求，每次单击表的每一列时都需要按升序对它进行排序。应用的逻辑是 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 这样的数据时，上面的代码失败

它按上面列出的顺序对值进行排序，尽管它应该将 76574893632 排序在 844401 之前

Answer 1

来自MDN docs :

If compareFunction is not supplied, elements are sorted by converting them to strings and comparing strings in Unicode code point order. For example, "Banana" comes before "cherry". In a numeric sort, 9 comes before 80, but because numbers are converted to strings, "80" comes before "9" in Unicode order.

鉴于这里提供的代码中您将 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 上为您实现了.

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