Angulaire 2. Comment appliquer orderBy?

J'ai un morceau de code.

JS:

<table class="table table-bordered table-condensed" cellpadding="0" cellspacing="0">
    <thead>
        <tr>
            <th>#</th>
            <th>Name</th>
            <th>Score</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="#participant of participants; #i = index">
            <td>{{i+1}}</td>
            <td>{{participant.username}}</td>
            <td>{{participant.score}}</td>
        </tr>
    </tbody>
</table>

Angulaire 1 j'ai orderBy filtre à lignes d'ordre par mon filtre. Mais comment puis-je faire orderBy Angulaire 2 de la même façon ? Merci.

InformationsquelleAutor Edward | 2016-02-17
  1. 14

    Vous avez besoin pour mettre en œuvre une tuyauterie sur mesure pour cela. Cela correspond à créer une classe décorée par @Pipe. En voici un échantillon. Sa méthode de transformation sera effectivement gérer la liste et vous serez en mesure de régler comme vous le souhaitez:

    import { Pipe } from "angular2/core";

@Pipe({
  name: "orderby"
})
export class OrderByPipe {
  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;
  }
}

    Vous pouvez ensuite utiliser cette pipe comme décrit ci-dessous dans les expressions. Par exemple, dans un ngFor. N'oubliez pas de spécifier votre tuyau dans le pipes attribut de l'élément où vous l'utilisez:

    @Component({
  (...)
  template: `
    <li *ngFor="list | orderby"> (...) </li>
  `,
  pipes: [ OrderByPipe ]
})
(...)
    InformationsquelleAutor Thierry Templier
  2. 12

    Si vous utilisez lodash votre tuyau peut être comme ceci:

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

@Pipe({
  name: 'orderBy'
})
export class OrderByPipe implements PipeTransform {
  transform = orderBy;
}

    Et puis vous pouvez utiliser toute la puissance de la méthode:

    <li *ngFor="let product of products | orderBy: 'price': 'desc'">
  {{product.name}}
</li>
    InformationsquelleAutor Alex Chuev
  3. 4

    Merci pour vos réponses. J'ai écrit réalisable code ci-dessous:

    JS:

    @Pipe({name: 'orderBy'})

export class orderBy implements PipeTransform {
    transform(obj: any, orderFields: string): any {
        orderFields.forEach(function(currentField) {
            var orderType = 'ASC';

            if (currentField[0] === '-') {
                currentField = currentField.substring(1);
                orderType = 'DESC';
            }

            obj.sort(function(a, b) {
                if (orderType === 'ASC') {
                    if (a[currentField] < b[currentField]) return -1;
                    if (a[currentField] > b[currentField]) return 1;
                    return 0;
                } else {
                    if (a[currentField] < b[currentField]) return 1;
                    if (a[currentField] > b[currentField]) return -1;
                    return 0;
                }
            });

        });
        return obj;
    }
}

    Ce code envisager d'ordre de la direction DESC ou ASC. L'utilisation:

    HTML:

    <tr *ngFor="#participant of participants | orderBy: '-score'; #i = index">

    • Vous ne devriez pas faire cela avec des tuyaux: angular.io/docs/ts/latest/guide/pipes.html#!#pas de filtre pipe
    • est correcte. Selon l'angle de la documentation, de performances et d'éviter les conflits dans la minification, les tuyaux ne doivent pas être utilisés pour le tri et orderby. Ces choses devraient être traitées dans les composants.
    InformationsquelleAutor Edward