OrderBy problème de tuyau

Je ne suis pas en mesure de traduire ce code d'Angualr 1 à Angular 2:

ng-repeat="todo in todos | orderBy: 'completed'"

Voici ce que j'ai fait suite à la réponse de Thierry Templier:

Modèle de composant:

*ngFor="#todo of todos | sort"

Code composant:

@Component({
    selector: 'my-app',
    templateUrl: "./app/todo-list.component.html",
    providers: [TodoService],
    pipes: [ TodosSortPipe ]

})

Code de conduite:

import { Pipe } from "angular2/core";
import {Todo} from './todo';

@Pipe({
  name: "sort"
})
export class TodosSortPipe {
  transform(array: Array<Todo>, args: string): Array<Todo> {
    array.sort((a: any, b: any) => {
      if (a < b) {
        return -1;
      } else if (a > b) {
        return 1;
      } else {
        return 0;
      }
    });
    return array;
  }
}

J'essaye de trier un tableau de Todos, triés par la propriété completed. D'abord todo.completed = false, puis le todo.complete = true.

Je ne comprends pas très bien la transformméthode et comment passer les arguments dans cette méthode et dans la sortméthode.

Quel est l' args: stringargument? Que sont a- bils et d'où viennent-ils?

J'ai modifié la réponse de @Thierry Templier pour que le tube puisse trier les objets personnalisés en angulaire 4:

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

@Pipe({
  name: "sort"
})
export class ArraySortPipe  implements PipeTransform {
  transform(array: any, field: string): any[] {
    if (!Array.isArray(array)) {
      return;
    }
    array.sort((a: any, b: any) => {
      if (a[field] < b[field]) {
        return -1;
      } else if (a[field] > b[field]) {
        return 1;
      } else {
        return 0;
      }
    });
    return array;
  }
}

Et pour l'utiliser:

*ngFor="let myObj of myArr | sort:'fieldName'"

Espérons que cela aide quelqu'un.

Veuillez consulter https://angular.io/guide/pipes#appendix-no-filterpipe-or-orderbypipe pour la discussion complète. Cette citation est la plus pertinente. Fondamentalement, pour les applications à grande échelle qui doivent être minimisées de manière agressive, la logique de filtrage et de tri doit se déplacer vers le composant lui-même.

"Certains d'entre nous ne se soucient peut-être pas de minimiser cela de manière agressive. C'est notre choix. Mais le produit Angular ne devrait pas empêcher quelqu'un d'autre de réduire agressivement. Par conséquent, l'équipe Angular a décidé que tout ce qui est expédié dans Angular sera réduit en toute sécurité.

L'équipe Angular et de nombreux développeurs Angular expérimentés vous recommandent vivement de déplacer la logique de filtrage et de tri dans le composant lui-même. Le composant peut exposer une propriété filteredHeroes ou sortedHeroes et prendre le contrôle du moment et de la fréquence d'exécution de la logique de prise en charge. Toutes les fonctionnalités que vous auriez placées dans un tube et partagées dans l'application peuvent être écrites dans un service de filtrage / tri et injectées dans le composant. "

Vous pouvez implémenter un tube personnalisé pour cela qui exploite la sortméthode des tableaux:

import { Pipe } from "angular2/core";

@Pipe({
  name: "sort"
})
export class ArraySortPipe {
  transform(array: Array<string>, args: string): Array<string> {
    array.sort((a: any, b: any) => {
      if (a < b) {
        return -1;
      } else if (a > b) {
        return 1;
      } else {
        return 0;
      }
    });
    return array;
  }
}

Et utilisez ensuite ce tuyau comme décrit ci-dessous. N'oubliez pas de spécifier votre pipe dans l' pipesattribut du composant:

@Component({
  (...)
  template: `
    <li *ngFor="list | sort"> (...) </li>
  `,
  pipes: [ ArraySortPipe ]
})
(...)

C'est un exemple simple pour les tableaux avec des valeurs de chaîne, mais vous pouvez avoir un traitement de tri avancé (basé sur des attributs d'objet dans le cas d'un tableau d'objets, basé sur des paramètres de tri, ...).

Voici un plunkr pour cela: https://plnkr.co/edit/WbzqDDOqN1oAhvqMkQRQ?p=preview .

J'espère que ça vous aide, Thierry

OrderByPipe mis à jour: correction des chaînes de non tri.

créer une classe OrderByPipe:

import { Pipe, PipeTransform } from "@angular/core";
@Pipe( {
name: 'orderBy'
} )
export class OrderByPipe implements PipeTransform {
transform( array: Array<any>, orderField: string, orderType: boolean ): Array<string> {
    array.sort( ( a: any, b: any ) => {
        let ae = a[ orderField ];
        let be = b[ orderField ];
        if ( ae == undefined && be == undefined ) return 0;
        if ( ae == undefined && be != undefined ) return orderType ? 1 : -1;
        if ( ae != undefined && be == undefined ) return orderType ? -1 : 1;
        if ( ae == be ) return 0;
        return orderType ? (ae.toString().toLowerCase() > be.toString().toLowerCase() ? -1 : 1) : (be.toString().toLowerCase() > ae.toString().toLowerCase() ? -1 : 1);
    } );
    return array;
  }
}

dans votre contrôleur:

@Component({
pipes: [OrderByPipe]
})

ou dans votre

 declarations: [OrderByPipe]

dans votre html:

<tr *ngFor="let obj of objects | orderBy : ObjFieldName: OrderByType">

ObjFieldName: nom du champ d'objet à trier;

OrderByType: booléen; vrai: ordre décroissant; faux: croissant;

Angular n'est pas livré avec un filtre orderBy prêt à l'emploi, mais si nous décidons d'en avoir besoin, nous pouvons facilement en créer un. Il y a cependant quelques mises en garde dont nous devons tenir compte concernant la vitesse et la minification. Voir ci-dessous.

Un simple tuyau ressemblerait à quelque chose comme ça.

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

@Pipe({
  name: 'sort'
})
export class SortPipe implements PipeTransform {
  transform(ary: any, fn: Function = (a,b) => a > b ? 1 : -1): any {
    return ary.sort(fn)
  }
}

Ce tube accepte une fonction de tri ( fn) et lui donne une valeur par défaut qui triera un tableau de primitives de manière sensible. Nous avons la possibilité de remplacer cette fonction de tri si nous le souhaitons.

Il n'accepte pas un nom d'attribut sous forme de chaîne, car les noms d'attribut sont sujets à une minification. Ils changeront lorsque nous réduirons notre code, mais les minificateurs ne sont pas assez intelligents pour minimiser également la valeur dans la chaîne de modèle.

Tri des primitives (nombres et chaînes)

Nous pourrions l'utiliser pour trier un tableau de nombres ou de chaînes en utilisant le comparateur par défaut:

import { Component } from '@angular/core';

@Component({
  selector: 'cat',
  template: `
    {{numbers | sort}}
    {{strings | sort}}
  `
})
export class CatComponent
  numbers:Array<number> = [1,7,5,6]
  stringsArray<string> = ['cats', 'hats', 'caveats']
}

Trier un tableau d'objets

Si nous voulons trier un tableau d'objets, nous pouvons lui donner une fonction de comparaison.

import { Component } from '@angular/core';

@Component({
  selector: 'cat',
  template: `
    {{cats | sort:byName}}
  `
})
export class CatComponent
  cats:Array<Cat> = [
    {name: "Missy"},
    {name: "Squoodles"},
    {name: "Madame Pompadomme"}
  ]
  byName(a,b) {
    return a.name > b.name ? 1 : -1
  }
}

Mises en garde - tuyaux purs ou impurs

Angular 2 a un concept de tuyaux purs et impurs.

Un canal pur optimise la détection des changements en utilisant l'identité d'objet. Cela signifie que le tube ne fonctionnera que si l'objet d'entrée change d'identité, par exemple si nous ajoutons un nouvel élément au tableau. Il ne descendra pas dans les objets. Cela signifie que si nous modifions un attribut imbriqué: this.cats[2].name = "Fluffy"par exemple, le tube ne sera pas réexécuté. Cela aide Angular à être rapide. Les tuyaux angulaires sont purs par défaut.

Un tuyau impur vérifiera les attributs des objets. Cela le rend potentiellement beaucoup plus lent. Comme il ne peut pas garantir ce que fera la fonction de canal (peut-être est-il trié différemment en fonction de l'heure de la journée, par exemple), un tuyau impur fonctionnera à chaque fois qu'un événement asynchrone se produit. Cela ralentira considérablement votre application si le tableau est volumineux.

Le tuyau ci-dessus est pur. Cela signifie qu'il ne fonctionnera que lorsque les objets du tableau seront immuables. Si vous changez de chat, vous devez remplacer tout l'objet chat par un nouveau.

this.cats[2] = {name:"Tomy"}

Nous pouvons changer ce qui précède en un tuyau impur en définissant l'attribut pur:

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

@Pipe({
  name: 'sort',
  pure: false
})
export class SortPipe implements PipeTransform {
  transform(ary: any, fn: Function = (a,b) => a > b ? 1 : -1): any {
    return ary.sort(fn)
  }
}

Ce tuyau descendra dans les objets, mais sera plus lent. Utiliser avec précaution.

J'ai créé un tube OrderBy qui fait exactement ce dont vous avez besoin. Il prend également en charge la possibilité de trier sur plusieurs colonnes d'un énumérable d'objets.

<li *ngFor="#todo in todos | orderBy : ['completed']">{{todo.name}} {{todo.completed}}</li>

Ce tube permet d'ajouter plus d'éléments au tableau après le rendu de la page, et triera le tableau avec les mises à jour de manière dynamique.

J'ai un article sur le processus ici .

Et voici une démo fonctionnelle: http://fuelinteractive.github.io/fuel-ui/#/pipe/orderby et https://plnkr.co/edit/DHLVc0?p=info

Je vous recommande d'utiliser du lodash avec angulaire, votre pipe sera la suivante:

import {Pipe, PipeTransform} from '@angular/core';
import * as _ from 'lodash'
@Pipe({
    name: 'orderBy'
})
export class OrderByPipe implements PipeTransform {

    transform(array: Array<any>, args?: any): any {
        return _.sortBy(array, [args]);
    }

}

et utilisez-le en html comme

*ngFor = "#todo of todos | orderBy:'completed'"

et n'oubliez pas d'ajouter Pipe à votre module

@NgModule({
    ...,
    declarations: [OrderByPipe, ...],
    ...
})

Cela fonctionnera pour tous les champs que vous lui transmettez. ( IMPORTANT: il ne classera que par ordre alphabétique, donc si vous passez une date, il le classera comme alphabet et non comme date)

/*
 *      Example use
 *      Basic Array of single type: *ngFor="let todo of todoService.todos | orderBy : '-'"
 *      Multidimensional Array Sort on single column: *ngFor="let todo of todoService.todos | orderBy : ['-status']"
 *      Multidimensional Array Sort on multiple columns: *ngFor="let todo of todoService.todos | orderBy : ['status', '-title']"
 */

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

@Pipe({name: "orderBy", pure: false})
export class OrderByPipe implements PipeTransform {

    value: string[] = [];

    static _orderByComparator(a: any, b: any): number {

        if (a === null || typeof a === "undefined") { a = 0; }
        if (b === null || typeof b === "undefined") { b = 0; }

        if (
            (isNaN(parseFloat(a)) ||
            !isFinite(a)) ||
            (isNaN(parseFloat(b)) || !isFinite(b))
        ) {
            // Isn"t a number so lowercase the string to properly compare
            a = a.toString();
            b = b.toString();
            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
    }

    public transform(input: any, config = "+"): any {
        if (!input) { return input; }

        // make a copy of the input"s reference
        this.value = [...input];
        let value = this.value;
        if (!Array.isArray(value)) { return value; }

        if (!Array.isArray(config) || (Array.isArray(config) && config.length === 1)) {
            let propertyToCheck: string = !Array.isArray(config) ? config : config[0];
            let desc = propertyToCheck.substr(0, 1) === "-";

            // Basic array
            if (!propertyToCheck || propertyToCheck === "-" || propertyToCheck === "+") {
                return !desc ? value.sort() : value.sort().reverse();
            } else {
                let property: string = propertyToCheck.substr(0, 1) === "+" || propertyToCheck.substr(0, 1) === "-"
                    ? propertyToCheck.substr(1)
                    : propertyToCheck;

                return value.sort(function(a: any, b: any) {
                    let aValue = a[property];
                    let bValue = b[property];

                    let propertySplit = property.split(".");

                    if (typeof aValue === "undefined" && typeof bValue === "undefined" && propertySplit.length > 1) {
                        aValue = a;
                        bValue = b;
                        for (let j = 0; j < propertySplit.length; j++) {
                            aValue = aValue[propertySplit[j]];
                            bValue = bValue[propertySplit[j]];
                        }
                    }

                    return !desc
                        ? OrderByPipe._orderByComparator(aValue, bValue)
                        : -OrderByPipe._orderByComparator(aValue, bValue);
                });
            }
        } else {
            // Loop over property of the array in order and sort
            return value.sort(function(a: any, b: any) {
                for (let i = 0; i < config.length; i++) {
                    let desc = config[i].substr(0, 1) === "-";
                    let property = config[i].substr(0, 1) === "+" || config[i].substr(0, 1) === "-"
                        ? config[i].substr(1)
                        : config[i];

                    let aValue = a[property];
                    let bValue = b[property];

                    let propertySplit = property.split(".");

                    if (typeof aValue === "undefined" && typeof bValue === "undefined" && propertySplit.length > 1) {
                        aValue = a;
                        bValue = b;
                        for (let j = 0; j < propertySplit.length; j++) {
                            aValue = aValue[propertySplit[j]];
                            bValue = bValue[propertySplit[j]];
                        }
                    }

                    let comparison = !desc
                        ? OrderByPipe._orderByComparator(aValue, bValue)
                        : -OrderByPipe._orderByComparator(aValue, bValue);

                    // Don"t return 0 yet in case of needing to sort by next property
                    if (comparison !== 0) { return comparison; }
                }

                return 0; // equal each other
            });
        }
    }
}

C'est un bon remplacement pour AngularJs orderby pipe en angulaire 4 . Facile et simple à utiliser.

Ceci est l'URL github pour plus d'informations https://github.com/VadimDez/ngx-order-pipe

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

@Pipe({
  name: 'orderBy'
})
export class OrderPipe implements PipeTransform {

  transform(value: any | any[], expression?: any, reverse?: boolean): any {
    if (!value) {
      return value;
    }

    const isArray = value instanceof Array;

    if (isArray) {
      return this.sortArray(value, expression, reverse);
    }

    if (typeof value === 'object') {
      return this.transformObject(value, expression, reverse);
    }

    return value;
  }

  /**
   * Sort array
   *
   * @param value
   * @param expression
   * @param reverse
   * @returns {any[]}
   */
  private sortArray(value: any[], expression?: any, reverse?: boolean): any[] {
    const isDeepLink = expression && expression.indexOf('.') !== -1;

    if (isDeepLink) {
      expression = OrderPipe.parseExpression(expression);
    }

    let array: any[] = value.sort((a: any, b: any): number => {
      if (!expression) {
        return a > b ? 1 : -1;
      }

      if (!isDeepLink) {
        return a[expression] > b[expression] ? 1 : -1;
      }

      return OrderPipe.getValue(a, expression) > OrderPipe.getValue(b, expression) ? 1 : -1;
    });

    if (reverse) {
      return array.reverse();
    }

    return array;
  }


  /**
   * Transform Object
   *
   * @param value
   * @param expression
   * @param reverse
   * @returns {any[]}
   */
  private transformObject(value: any | any[], expression?: any, reverse?: boolean): any {
    let parsedExpression = OrderPipe.parseExpression(expression);
    let lastPredicate = parsedExpression.pop();
    let oldValue = OrderPipe.getValue(value, parsedExpression);

    if (!(oldValue instanceof Array)) {
      parsedExpression.push(lastPredicate);
      lastPredicate = null;
      oldValue = OrderPipe.getValue(value, parsedExpression);
    }

    if (!oldValue) {
      return value;
    }

    const newValue = this.transform(oldValue, lastPredicate, reverse);
    OrderPipe.setValue(value, newValue, parsedExpression);
    return value;
  }

  /**
   * Parse expression, split into items
   * @param expression
   * @returns {string[]}
   */
  private static parseExpression(expression: string): string[] {
    expression = expression.replace(/\[(\w+)\]/g, '.$1');
    expression = expression.replace(/^\./, '');
    return expression.split('.');
  }

  /**
   * Get value by expression
   *
   * @param object
   * @param expression
   * @returns {any}
   */
  private static getValue(object: any, expression: string[]) {
    for (let i = 0, n = expression.length; i < n; ++i) {
      const k = expression[i];
      if (!(k in object)) {
        return;
      }
      object = object[k];
    }

    return object;
  }

  /**
   * Set value by expression
   *
   * @param object
   * @param value
   * @param expression
   */
  private static setValue(object: any, value: any, expression: string[]) {
    let i;
    for (i = 0; i < expression.length - 1; i++) {
      object = object[expression[i]];
    }

    object[expression[i]] = value;
  }
}

Comme nous savons que le filtre et l'ordre par sont supprimés de ANGULAR 2 et que nous devons écrire les nôtres, voici un bon exemple sur plunker et un article détaillé

Il a utilisé à la fois filtre et orderby, voici le code du tube de commande

import { Pipe, PipeTransform } from '@angular/core';    
@Pipe({  name: 'orderBy' })
export class OrderrByPipe implements PipeTransform {

  transform(records: Array<any>, args?: any): any {       
    return records.sort(function(a, b){
          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;
          }
        });
    };
 }

Vous pouvez l'utiliser pour les objets:

@Pipe({
  name: 'sort',
})
export class SortPipe implements PipeTransform {

  transform(array: any[], field: string): any[] {
    return array.sort((a, b) => a[field].toLowerCase() !== b[field].toLowerCase() ? a[field].toLowerCase() < b[field].toLowerCase() ? -1 : 1 : 0);
  }

}

Dans package.json, ajoutez quelque chose comme (Cette version est ok pour Angular 2):

  "ngx-order-pipe": "^1.1.3",

Dans votre module dactylographié (et importe le tableau):

  import { OrderModule } from 'ngx-order-pipe';

<!-- const cars=['Audi','Merc','BMW','Volvo','Tesla'] -->

<ul>
  <li *ngFor="let car of cars">{{car}}</li>
</ul>


/*
 *ngFor="let c of oneDimArray | sortBy:'asc'"
 *ngFor="let c of arrayOfObjects | sortBy:'asc':'propertyName'"
*/
import { Pipe, PipeTransform } from '@angular/core';
import { orderBy } from 'lodash';

@Pipe({ name: 'sortBy' })
export class SortByPipe implements PipeTransform {

  transform(value: any[], order = '', column: string = ''): any[] {
    if (!value || order === '' || !order) { return value; } // no array
    if (!column || column === '') { return sortBy(value); } // sort 1d array
    if (value.length <= 1) { return value; } // array with only one item
    return orderBy(value, [column], [order]);
  }
}

Dans la version actuelle d'Angular2, les canaux orderBy et ArraySort ne sont pas pris en charge. Vous devez écrire / utiliser des tubes personnalisés pour cela.

Pour la version Angular 5+, nous pouvons utiliser le package ngx-order-pipe

Lien du didacticiel source

Installer le paquet

$ npm install ngx-order-pipe --save

Importer dans le module des applications

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { OrderModule } from 'ngx-order-pipe';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    OrderModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

utiliser n'importe où

  <ul>
    <li *ngFor="let item of (dummyData | orderBy:'name') ">
      {{item.name}}
    </li>
  </ul>

orderby Pipe dans Angular JS prendra en charge mais Angular (versions supérieures) ne le prendra pas en charge . Veuillez trouver les détails discutés pour augmenter la vitesse de performance de son obsolète.

https://angular.io/guide/pipes#appendix-no-filterpipe-or-orderbypipe

Component template:
todos| sort: ‘property’:’asc|desc’

Pipe code:

import { Pipe,PipeTransform  } from "angular/core";
import {Todo} from './todo';

@Pipe({
  name: "sort"
})
export class TodosSortPipe implements PipeTransform {
  transform(array: Array<Todo>, args: string): Array<Todo> {
    array.sort((a: any, b: any) => {
      if (a < b) {
        return -1;
      } else if (a > b) {
        return 1;
      } else {`enter code here`
        return 0;
      }
    });
    return array;
  }
}