Comment filtrer avec Angular 2
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éponses
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
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
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:)
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
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...