OrderBy pipe problème

Veuillez voir https://angular.io/guide/pipes#appendix-no-filterpipe-or-orderbypipe pour la pleine discussion. Cette citation est la plus pertinente.
En gros, pour les grandes applications qui doivent être minimisé de façon agressive de tri et de filtrage logique doit se déplacer vers le composant lui-même.

"Certains d'entre nous ne se soucient pas de rapetisser ce de manière agressive. C'est notre
choix. Mais l'angle de produit ne devrait pas empêcher quelqu'un d'autre de
minifying de façon agressive. Par conséquent, l'Angulaire de l'équipe a décidé que
le tout livré dans Angulaire va rapetisser en toute sécurité.

L'Angulaire de l'équipe et de nombreux expérimenté Angulaire développeurs fortement
vous recommandons de vous déplacer de tri et de filtrage logique dans le composant
lui-même. Le composant peut exposer un filteredHeroes ou sortedHeroes
de la propriété et de prendre le contrôle sur le moment et la fréquence d'exécution de la
l'appui de la logique. Toutes les fonctionnalités qui vous aurait mis dans un tuyau
et partagée au sein de l'application peut être écrit dans un de filtre et de tri
service et injecté dans le composant."

Vous pourriez mettre en œuvre une coutume pipe pour ce qui tire parti de la sort mé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 d'utiliser ensuite cette pipe comme décrit ci-dessous. N'oubliez pas de spécifier votre tuyau dans le pipes attribut du composant:

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

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

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

Espère que cela vous aide,
Thierry

Angulaire ne vient pas avec un orderBy filtre hors de la boîte, mais si nous décidons nous avons besoin, nous pouvons facilement faire un. Il y a cependant quelques mises en garde, nous avons besoin d'être conscient de la faire avec 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)
  }
}

Cette pipe accepte une fonction de tri (fn), et lui donne une valeur par défaut qui permet de trier un tableau de primitives d'une manière sensible. Nous avons la possibilité de substitution de cette fonction de tri si nous le souhaitons.

Il n'accepte pas un nom d'attribut comme une chaîne de caractères, parce que les noms d'attributs sont soumis à la minification. Ils vont changer lorsque nous rapetisser notre code, mais minifiers ne sont pas assez intelligents aussi de rapetisser la valeur dans la chaîne de modèle.

Tri primitives (les nombres et les chaînes de caractères)

Que nous pourrions utiliser pour trier un tableau de nombres ou de chaînes de caractères à l'aide de la valeur par défaut de comparaison:

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']
}

Tri d'un tableau d'objets

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

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 - pure vs impur tuyaux

Angulaire 2 a une notion de pur et de l'impur tuyaux.

Une pure pipe optimise la détection de changement à l'aide de l'identité de l'objet. Cela signifie que le tuyau sera exécuté uniquement si l'entrée de l'objet de changements d'identité, par exemple, si nous ajoutons un nouvel élément dans le tableau. Il ne sera pas la descente dans les objets. Cela signifie que si nous changeons d'un ensemble d'attribut: this.cats[2].name = "Fluffy" par exemple, le tuyau ne sera pas relancé. Cela permet Angulaire d'être rapide. Angulaire tuyaux sont de la pure par défaut.

Un impur pipe d'autre part de vérifier les attributs de l'objet. Ce qui le rend beaucoup plus lent. Car il ne peut pas garantir que le tuyau de la fonction le fera (peut-être qu'il sortd différemment selon le moment de la journée par exemple), un mauvais tuyau d'exécuter à chaque fois qu'un événement asynchrone se produit. Cela va ralentir votre application considérablement si le tableau est grand.

La conduite ci-dessus est pur. Cela signifie qu'il ne fonctionne que lorsque les objets dans le tableau sont immuables. Si vous modifiez un chat, vous devez remplacer l'ensemble de la cat objet avec un nouveau.

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

Nous pouvons changer le ci-dessus pour un impur pipe par la définition de la pure attribut:

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)
  }
}

Cette pipe descendra dans les objets, mais sera plus lent. À utiliser avec prudence.

Recommander u utilisation lodash angulaire, alors votre tuyau sera pour la prochaine fois:

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 de l'utiliser dans le code html comme

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

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

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

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

C'est github URL 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;
  }
}

Vous pouvez l'utiliser pour des 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 la version actuelle de Angular2, et orderBy ArraySort les tuyaux ne sont pas pris en charge. Vous avez besoin d'écrire/utiliser quelques tuyaux pour cela.

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;
  }
}