Angular2 tableau de tri pour l'affichage dans les *ngFor en html
Je suis passer en boucle sur tous les postes
<li *ngFor="let post of posts">
Lors de l'affichage de la date pour chaque post, je n':
{{post.date | date:'yyyy-MM-dd HH:mm:ss'}}
Ce que je veux faire, c'est afficher tous les messages dans l'ordre de la plus récente en premier.
J'ai essayé à l'aide d'une pipe comme:
<li *ngFor="let post of posts | order-by-pipe">
import {Pipe, PipeTransform} from '@angular/core';
@Pipe({
name: 'order-by-pipe'
})
export class OrderByPipe implements PipeTransform{
transform(array: Array<string>, args: string): Array<string> {
if(!array || array === undefined || array.length === 0) return null;
array.sort((a: any, b: any) => {
if (a.date < b.date) {
return -1;
} else if (a.date > b.date) {
return 1;
} else {
return 0;
}
});
return array;
}
}
Mais il ne fonctionne pas. J'obtiens l'erreur:
TypeError: Cannot read property 'toUpperCase' of undefined ("
[ERROR ->]*ngFor="let post of posts | order-by-pipe">
Toute aide serait la bienvenue, merci
- Cela semble induire en erreur, où est
toUpperCase
appelée? Pas n'importe où, dans ce que vous avez posté. - Je sais, l'erreur ne donne pas beaucoup d'aide, c'est pourquoi je pense que peut-être le tuyau qui en est la cause. sans la pipe, puis je reçois aucun message d'erreur.
Vous devez vous connecter pour publier un commentaire.
Lorsque vous utilisez
order-by-pipe
que le sélecteur, il est tentant de trouver les variablesorder
by
etpipe
et qui sait ce qu'avec elles.La modification de la
name:
dans votre pipe àorderByPipe
résout le problème.Qui était bizarre.
Voici une démo du même code, nom différent: http://plnkr.co/edit/BXkrPqeMYuJMhkx94i6M?p=preview
L'Angulaire de l'équipe recommande à l'encontre de l'utilisation de tuyaux pour le tri dans Angulaire 2, et a abandonné cette fonctionnalité à partir d'AngularJS volontairement. Comme détaillé sur https://angular.io/guide/pipes:
Voir une discussion similaire à https://stackoverflow.com/a/43092380/3211269