0
votes

Filtrage observable angulaire

J'ai rencontré un problème pour filtrer un observable avec un tableau. Laissez-moi vous expliquer ...

J'ai:

  • Produits $: Observable;
  • filtréproducts $: Observable;
  • sélectionnéfilters = [[[[Nom du filtre ', IDOffilter], [' Nom du filtre ', IDOffilter]]; (vide pour le début)

    Voici la structure d'un objet de produit: Voici la structure d'un objet de produit

    et voici la structure de mon réseau de filtres Entrez la description de l'image ici

    J'aimerais régler sur filtréproducts le résultat de mon filtrage. Pour le filtre, je dois vérifier si le tableau de filtre du produit contient le nom du filtre et si les produits de valeurs de produits contiennent le filtre ID de filtre.

    J'écris jusqu'à présent mais je ne sais pas comment Vraiment filtrer mon observable ... xxx


0 commentaires

3 Réponses :


0
votes

Vous pouvez déclarer votre filtréproducts $ dans ngoninit () : xxx

donc chaque fois que vous avez Modifications, le filtre s'appliquera. Avec Startwith () Vous pouvez dire que les filtres Observable émettent un tableau vide avant de commencer à émettre des éléments émis par la source observable.

Modifier : AH Vous utilisez Filtres $ déjà comme @Select. J'ai mis à jour ma réponse.


7 commentaires

Merci beaucoup pour votre réponse rapide. Je comprends pourquoi vous dites à mon que, cependant, je ne sais pas comment faire le filtre car je dois mapper les filtres sélectionnés où vous me dites de filtrer


Donc, si je vous comprends correctement, vous souhaitez filtrer un éventail de produits avec un tableau de filtres. Et un produit a également une gamme de filtres, qui disposent d'une gamme de valeurs? Le temps d'exécution serait horrible. Je suppose que vous devez dépasser votre flux de travail.


Cette solution ne mettra pas à jour lorsque Filtres $ modifications, il ne mettra que mettre à jour chaque fois que produits $ changements. Je pense que Combinelatst serait un bon ajustement pour ce scénario. De cette façon, chaque fois que produits $ ou filtres $ modifications, filtréProducts $ sera mis à jour en conséquence. Voir ma réponse ci-dessous.


@Bizzybob Mon exemple fonctionne à coup sûr. Il mettra à jour quand le problème du comportement change. Voir un petit exemple: Stackblitz.com/edit/angular-ivy-5ziu8s


Votre Stackblitz est un peu différent de celui-ci. J'ai fait des commentaires sur votre Stack Blitz . Je ne dis pas que cela ne fonctionnera pas, cela fonctionnera à tout moment le Produits $ Observable obtient une nouvelle valeur, mais je pense dans ce cas, il voudrait qu'il veuille mettre à jour chaque fois que les filtres $ Observable émet une nouvelle valeur.


Non, il mettra également à jour lorsque les filtres $ émettent une nouvelle valeur. ComportorSubject est une super classe d'observable. Bien sûr, mon stackblitz est surkill, mais je veux que vous montriez que cela fonctionne également avec Switchmap .


Vous avez raison :-) Je suppose que je pensais que Switchmap aurait besoin d'une nouvelle valeur, mais ce n'est pas le cas.



0
votes

Je pense que cela pourrait être une solution: xxx


9 commentaires

Merci mais qu'en est-il de la deuxième ligne de «F» dans la deuxième ligne du filtre? f.values.some .... f est inconnu


C'est un fichier objet à partir de product.filters . Qu'entendez-vous par inconnu ?


Impossible de trouver le nom 'f'


Je pense que f est ce n'est pas dans les produits filtres privés Scoop () {this.filteredproducts $ = Ceci.Products $ .Pipe (Carte (ProduitsR => ProduitsR.Filter (P => P.Filters.Some (F => Ceci. SélectionnéFilters.Some (([sélectionnéf]) => sélectionnéf === f.Name)) // Nom du filtre && f.values.some (valeur => Ceci.SelectedFilters.Some (([ filtrant]) => filtrantide = == valeur)) // ID de filtre))); ceci.filteredproducts $ .Subscribe (res => console.log («filtré: ', res)); }


Je suis désolé, il y avait un supplémentaire) sur la première ligne. Ça devrait aller maintenant maintenant.


Okkk: p. Je l'ai fait mais quand je suis souscrivais et loger des produits filtrés, il est toujours vide


Ok j'ai eu un problème avec une majuscule et je l'ai réparée. Ça marche mais seulement avec un filtre


Pourriez-vous partager l'exemple? En outre, cela pourrait valoir la peine d'ouvrir une discussion.


J'ai écrit une nouvelle réponse :-)



0
votes

Vous pouvez utiliser Combinelatst code> Pour créer un flux observable mis à jour chaque fois que l'une des sources observables émet une nouvelle valeur.

  filteredProducts$ = combineLatest(this.products$, this.filters$).pipe(
    map(([products, selectedFilters]) => {
      return products.filter(p => {
        // actual filter logic goes here
        return p.filters.some(pf => selectedFilters.some(f => pf == f));
      });
    })
  );


1 commentaires

Merci @bizzybob, ça pourrait être une belle solution et je le garde dans ma tête ^^. Cependant, je devais filtrer mes filtres avec le tableau SélectionnéFilters