Angular 4 OrderBy Pipe ne trie pas si le nom se termine par un chiffre

Question

Je veux utiliser pipe pour trier les noms se terminant par des chiffres.

J'ai utilisé un tuyau personnalisé et obtenu les résultats escomptés.

• Symbole de la pomme
• 1Pomme fruit - nombres
• Pomme fruit -alphabétiquement

Mais il n'y a pas de tri si le nom se termine par un numéro.

Résultat maintenant :

• Pomme fruit3
• Pomme fruit01
• Pomme fruit5
• Pomme fruit02

JSON

[
{"name": "Apple fruit3"},
{"name": "$Apple fruit"},
{"name": "Apple fruit"},
{"name": "Apple fruit01"},
{"name": "Apple fruit5"},
{"name": "Apple fruit02"},
]

HTML

<div *ngFor='let list of names | appOrderBy : "name" '>
<div>{{list.name}}</div>
</div>

OrderBy Tube personnalisé

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
     name: 'appOrderBy'
})
export class OrderBy implements PipeTransform {
transform(array: Array<string>, args: string): Array<string>{
array.sort((a: any, b: any) => {
  if (a[args] < b[args]) {
    return -1;
  } else if (a[args] > b[args]) {
    return 1;
  } else {
    return 0;
  }
});
return array;
}
}

Answer 1

Utilisez un Intl.Collator comme fonction de comparaison pour le tri des nombres naturels.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Collator

const array = [
  {name: "Apple fruit3"},
  {name: "$Apple fruit"},
  {name: "Apple fruit"},
  {name: "Apple fruit01"},
  {name: "Apple fruit5"},
  {name: "Apple fruit02"},
];

args= 'name';

var collator = new Intl.Collator(undefined, {numeric: true, sensitivity: 'base'});

array.sort((a, b) => collator.compare(a[args], b[args]));

console.log(array);

J'ai basé cette réponse sur la recherche d'un nombre naturel sur Google qui a retourné cet article.

Javascript : tri naturel de chaînes alphanumériques