0
votes

Tableau observable angulaire à 6 filtres avec tuyau

J'affiche une liste d'objets dans une boucle ngFor et je voudrais filtrer cette liste avec un tube.

Mes recherches m'ont conduit à ceci:

filter-by.pipe.ts:

<tr *ngFor="let item of items$|async|filterBy: {isActive: false}">
    <td>{{item.firstname}}</td>
    <td>{{item.lastname}}</td>
    <td>{{item.age}}</td>
</tr>

dans mon.component.html:

import { Pipe, PipeTransform } from '@angular/core';
import { UserLink } from '../_models/user-link';

@Pipe({
    name: 'filterBy'
})
export class FilterByPipe implements PipeTransform {
    transform(items: User[], isActive: boolean): any {
        if (!items) { return []; }
        return items.filter(x => x.isActive === isActive);
    }
}

Mais le résultat n'est pas ce que j'attends: mon tableau est vide .

Que me manque-t-il pour le faire fonctionner?

J'ai essayé ma solution dans ce stackblitz ( https://stackblitz.com/edit/angular-46atle ) et cela fonctionne. Mais je n'arrive toujours pas à le faire fonctionner dans mon projet. J'ai vérifié les propriétés de mon objet et le reste du code mais je ne vois pas où se trouve mon erreur

[EDIT]

Problème résolu! Il y avait un casting manquant entre l'objet sur lequel je filtrais et l'objet sur lequel je pensais filtrer.! Erreur du débutant!

Merci pour vos adivces!

angular observable ngfor angular-pipe

2 commentaires

Probablement

J'ai toujours le même problème: aucun résultat. J'ai vérifié via la console si mon paramètre de filtre est correctement rempli et cela ne pose aucun problème. C'est comme si le filtre ne fonctionnait pas ou ne renvoyait pas de tableau vide. Est-ce parce que je travaille avec observable? Peut-être que je fais quelque chose de mal avec mes éléments dans le code pipe?

3 Réponses :

2
votes

Vous n'êtes pas obligé de passer un objet, votre pipe accepte tableau et booléen en entrée. essayez simplement comme suit

<tr *ngFor="let item of items$|async|filterBy: false">

0 commentaires

0
votes

vous pouvez filtrer votre tableau comme ceci:

 <tr *ngFor="let item of _items | filter:{label: filterText}">{{ item.label }}</li>

https://long2know.com/2016/11/angular2-filter-pipes/

0 commentaires

6
votes

Vous ne devez pas utiliser de tuyaux pour filtrer ou trier les listes:

https://angular.io/guide/pipes#no-filter-pipe

L'équipe Angular et de nombreux développeurs Angular expérimentés fortement recommander de déplacer la logique de filtrage et de tri dans le composant lui-même.

Par exemple, vous pouvez convertir le tableau en observable et appliquer votre logique de filtrage à l'aide d'opérateurs RxJS canalisables:

Rx.Observable.from(items)
    .pipe(
         filter(item => item.size >= 1),
         map(item => "Item name: " + item.name),
         // more filtering logic
      ) 
    .subscribe(item => console.log(item))
);

3 commentaires

Merci pour le conseil. Je mettrai à jour mon code en conséquence. Mais j'ai quand même un cas d'utilisation pour lequel cela pourrait être utile: si vous voulez afficher une même liste selon deux états différents (par exemple, le statut isActive), n'est-il pas plus lourd de dupliquer le code pour les lignes actives et les lignes inactives? même dans ce genre de cas, la pipe encore chère?

Je ne pense pas que vous deviez dupliquer quoi que ce soit, vous pouvez simplement accéder à votre booléen isActive depuis la boucle * ngFor et l'utiliser pour manipuler votre modèle de la manière que vous voulez, ai-je raison?

Cela pourrait être une bonne solution mais j'utilise un paginateur donc je ne suis pas sûr du résultat. Mais le plus simple sera le mieux, les listes en double devraient être le meilleur moyen de le faire sans les tuyaux de filtrage.