Comment filtrer avec Angular 2

Ce sujet est résolu
107460
,

Bonjour, je galère depuis des heures à chercher comment ordonner une liste des heros en nombre croissant/Decroissant

Voila je rencontre un petit problème avec mon code.

Ce que je fais

Mon code Service TypeScript qui contien les heros

 private heroes = [
    {
      id: 0,
      name: 'Batman',
      power: 'lames',
      alterego: 'Souris'
    },
    {
      id: 1,
      name: 'Sangoku',
      power: 'boule de feu',
      alterego: 'picsou'
    },
    {
      id: 2,
      name: 'Spiderman',
      power: 'toile',
      alterego: 'areignée'
    }
  ];
  getHeroes() {
   return this.subject.next(this.heroes);
  }
  addHeros(heros: AddHeroService) {
    console.log('le hero ajoute ', heros);
    this.heroes.push(heros);
  }

Ma methode type script qui recupere les heros

...
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
...
  ngOnInit() {
    this.Myheros.subject.subscribe((myheros: any) => {
      this.allheroes = myheros;
    });
    this.Myheros.getHeroes();
  }

Le template qui affiche les heros

<h2>Tous les heros</h2>
<ul class="list-group">
    <li class="list-group-item" *ngFor="let hero of allheroes'">
        <span class="badge">{{hero.power}}</span> {{hero.name}}
    </li>
</ul>

Ce que je veux

Jusque là le code marche. Mais je voudrais afficher la liste des héros en ordre croissant, c-a-d commençant par l'id le plus grand dans mon object.

<li class="list-group-item" *ngFor="let hero of allheroes | orderBy: '- hero.id'">
        <span class="badge">{{hero.power}}</span> {{hero.name}}
    </li>

Ce que j'obtiens

J'obtien une erreur quant j'ajoute le pipe orderBy[Angular] The pipe 'orderBy' could not be found
property allheroes of AppComponent

Besoin d'aide svp, j' en ai besoin, je galère.

Merci

5 Réponse

107460
,

Je ne suis pas expert à Angular, je decouvre le framework. Et oui j'utilise le CLI. Bon j'ai trouvé ça sur le github, et ça resolu mon problème: https://github.com/VadimDez/ngx-order-pipe

Default
,

si tu avait pris le temps de lire la doc:

Angular comes with a stock of pipes such as DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipe, and PercentPipe. They are all available for use in any template.

Angular doesn't have a FilterPipe or an OrderByPipe for reasons explained in the Appendix of this page.

tu doit creer un pipe custom pour orderby ta liste

107460
,

J'avais dèjà lu la doc, et j'avais même crée un pipe custom orderBy. C'est vrai que j'aurais en parler. Alors voilà:

Mon script pipe orderBy.Ts

import { Component, OnInit } from '@angular/core';
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({ name: 'orderBy' })
@Component({
  selector: 'app-order-by',
  templateUrl: './order-by.component.html',
  styleUrls: ['./order-by.component.css']
})
export class OrderByComponent implements PipeTransform {
  constructor() { }
  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;
      }
    });
  }
}

je l'ai importé dans mon component.ts

import { OrderByComponent } from './order-by/order-by.component';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  pipe: [OrderByComponent] // J'ai une erreur qui dit que le pipe n'existe pas dans le type component
})
...

J'ai essayé ensuite ça:
dans mon component principale

@Pipe({ name: 'orderBy' })
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit, 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;
      }
    });
  }
  ...

Mais lorsque j'ajoute le pipe orderBy comme si

 <li class="list-group-item" *ngFor="let hero of allheroes | orderBy: 'hero.id' "> <--erreur à ce niveau !-->
        <span class="badge">{{hero.power}}</span> {{hero.name}}
    </li>

j'ai une erreur The pipe 'orderBy' could not be found

Qu'est-ce-qui ne va pas ? C'est à peine si je casse pas mon pc LoL:)

Default
,

Alors déjà il y a de gros problèmes de nomenclature, une pipe n'est pas un composant c'est une pipe, donc ça doit être orderbypipe. TA pipe est décorée de @component. Ça me semble logique que le Framework te pète une erreur... en lisant le code on comprend que ça ne va pas des tous.

Tu utilise angular CLI? parce que là apparemment tu donnes l'impression de faire un peu n'importe quoi et tu ne sembles pas comprendre ce que tu fais

Default
,

alors pk ne pas avoir fait

ng g pipe orberdy 

c´est une commande angular cli pour creer les pipes tu aurait eu la bonne structure pour faire marcher ton pipe. regarde bien la doc d'angular cli pour automatiser la creation de composant de module de service de pipe etc...

doc cli