web-dev-qa-db-fra.com

angular 5, orderBy asc/desc

Existe-t-il une option pour modifier le tri par asc/déc dans l'ordrePar pipe?

Le tableau:

this.testArr = [{name: 'bbb', id: '1'}, {name: 'ccc', id: '2'}, {name: 'aaa', id: '0'}];

En HTML:

<ul><li *ngFor="let item of testArr | orderBy: 'id' : true"><div>{{item.id}}</div></li></ul>

Remplacer "vrai" par "faux"/"asc"/"desc" n'a pas fonctionné . La sortie requise doit être: 0, 1, 2 et par l'autre paramètre: 2, 1, 0.

Je vous remercie.

angular5angularjs-orderby
2
user636312

Le guide angulaire recommande de ne pas utiliser de tuyaux en raison de problèmes de performance et de minimisation - https://angular.io/guide/pipes#appendix-no-filterpipe-or- orderbypipe

La méthode préférée consiste à avoir une méthode de filtrage/tri dans le composant.

sortAccounts(prop: string) {
    const sorted = this.accounts.sort((a, b) => a[prop] > b[prop] ? 1 : a[prop] === b[prop] ? 0 : -1);
    // asc/desc
    if (prop.charAt(0) === '-') { sorted.reverse(); }
    return sorted;
}

Puis dans la vue des composants

<li *ngFor="let a of sortAccounts('id')">

ou

<li *ngFor="let a of sortAccounts('-id')">
5
Horse

Essayez ce code: Vous pouvez créer un canal personnalisé pour le tri:

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

@Pipe({
    name: 'orderBy'
})
export class OrderBy{

 transform(array, orderBy, asc = true){

     if (!orderBy || orderBy.trim() == ""){
       return array;
     } 

     //ascending
     if (asc){
       return Array.from(array).sort((item1: any, item2: any) => { 
         return this.orderByComparator(item1[orderBy], item2[orderBy]);
       });
     }
     else{
       //not asc
       return Array.from(array).sort((item1: any, item2: any) => { 
         return this.orderByComparator(item2[orderBy], item1[orderBy]);
       });
     }

 }

 orderByComparator(a:any, b:any):number{

     if((isNaN(parseFloat(a)) || !isFinite(a)) || (isNaN(parseFloat(b)) || !isFinite(b))){
       //Isn't a number so lowercase the string to properly compare
       if(a.toLowerCase() < b.toLowerCase()) return -1;
       if(a.toLowerCase() > b.toLowerCase()) return 1;
     }
     else{
       //Parse strings as numbers to compare properly
       if(parseFloat(a) < parseFloat(b)) return -1;
       if(parseFloat(a) > parseFloat(b)) return 1;
      }

     return 0; //equal each other
 }
}

.component.ts 

list = [
    {
        name:"Terry",
        age:23
    },
    {
        name:"Bob",
        age:25
    }
    {
        name:"Larry",
        age:27
    }
];

order = "age";
ascending = true;

.html 

<div *ngFor="let person of list | orderBy:order:ascending">
    Name: {{person.name}}, Age: {{person.age}}
</div>
0
Vignesh