IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Angular Discussion :

Utiliser les Chips pour filtrer une datasource


Sujet :

Angular

  1. #1
    Membre du Club
    Homme Profil pro
    Ingénieur systèmes et réseaux
    Inscrit en
    Novembre 2017
    Messages
    124
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 24
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Ingénieur systèmes et réseaux
    Secteur : High Tech - Opérateur de télécommunications

    Informations forums :
    Inscription : Novembre 2017
    Messages : 124
    Points : 46
    Points
    46
    Par défaut Utiliser les Chips pour filtrer une datasource
    Hey
    En rapport avec ma question précédente, j'ai tenté d'intégrer un input de valeur avec des Chips. Il "fonctionne à moitié" car je rencontre 3 problèmes..

    Le nouveau stackblitz : https://stackblitz.com/edit/angular-...g-example.html

    Mon objectif : Exclure un name de la datasource après chaque ajout d'une valeur de "Chips" (après un ENTER,SPACE,COMMA) //readonly separatorKeysCodes: number[] = [ENTER, COMMA, SPACE];
    Lorsqu'un chips est supprimé, actualiser la datasource avec les chips actuels

    Actuellement :

    Si je rentre un chips "test" rien ne se passe. Par contre si je rajoute n'importe quoi après dans la saisie, l'event OnChange est fired donc le "test" est désormais exclu des résultats.
    Si je supprime un/tous chips, il est bien supprimé de la liste mais pas du filtrage
    Et le dernier problème que je ne comprends pas, j'ai été obligé de spécifier ceci, sinon la variable était en undefined dans le bloc customFilterPredicate() alors que je faisais un const words = this.excludeNameChips;
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
     
    this.dataSource.filterPredicate = this.customFilterPredicate(
          this.excludeNameChips // CECI
        );

    Merci pour l'aide

  2. #2
    Membre éprouvé
    Homme Profil pro
    Développeur Web
    Inscrit en
    Janvier 2019
    Messages
    707
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 41
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2019
    Messages : 707
    Points : 1 030
    Points
    1 030
    Par défaut
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
      add(event: MatChipInputEvent): void {
        const input = event.input;
        const value = event.value;
    
        // Add our fruit
        if ((value || "").trim()) {
          this.excludeNameChips.push(value.trim());
        }
    
        // Reset the input value
        if (input) {
          input.value = "";
        }
    
        console.log(this.excludeNameChips);        //   ici la liste 
    
    ---> déclencher l'action du filtre
      }
    
      remove(excludeName: any): void {
    
    .....
    ---> déclencher l'action du filtre
      }

  3. #3
    Membre du Club
    Homme Profil pro
    Ingénieur systèmes et réseaux
    Inscrit en
    Novembre 2017
    Messages
    124
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 24
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Ingénieur systèmes et réseaux
    Secteur : High Tech - Opérateur de télécommunications

    Informations forums :
    Inscription : Novembre 2017
    Messages : 124
    Points : 46
    Points
    46
    Par défaut
    En effet, merci c'est fonctionnel avec :

    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
     
    this.filteredValues.excludeName = this.excludeNameChips;
    this.dataSource.filter = JSON.stringify(this.filteredValues);

    Par contre à tu une idée pour ceci ? J'aimerais éviter de spécifier des paramètres, dans ma vision des choses je ne dois pas en avoir besoin..

    "Et le dernier problème que je ne comprends pas, j'ai été obligé de spécifier ceci, sinon la variable était en undefined dans le bloc customFilterPredicate() alors que je faisais un const words = this.excludeNameChips;"
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
     
    this.dataSource.filterPredicate = this.customFilterPredicate(
          this.excludeNameChips // J'aimerais ne rien spécifier comme paramètre ici
        );
     
    // Avec
     
    customFilterPredicate(fruit: any) {}

  4. #4
    Membre expert
    Avatar de dukoid
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Novembre 2012
    Messages
    2 100
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Novembre 2012
    Messages : 2 100
    Points : 3 004
    Points
    3 004
    Par défaut
    après une petit semaine de vacance !

    (1)

    facile, dans la fonction: customFilterPredicate(fruit: any) { ....
    tu remplaces fruit par: this.excludeNameChips


    en principe, c'est quand même gênant :

    avec cet exemple, ça fonctionne mais c'est quand meme un peu problèmatique. est ce que que tu vois ?
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
     
    maVariable: string;
     
    maFonction() {
    console.log(this.maVariable);
    }



    (2)
    la fonction: customFilterPredicate(fruit: any) {
    attends un paramètre, si tu n'en met pas lors de ton appel, fruit est undefined

  5. #5
    Membre du Club
    Homme Profil pro
    Ingénieur systèmes et réseaux
    Inscrit en
    Novembre 2017
    Messages
    124
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 24
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Ingénieur systèmes et réseaux
    Secteur : High Tech - Opérateur de télécommunications

    Informations forums :
    Inscription : Novembre 2017
    Messages : 124
    Points : 46
    Points
    46
    Par défaut
    Salut !

    C'est ça mon problème :" tu remplaces fruit par: this.excludeNameChips" -> La variable est à undefined !
    -> console.log("this.fruits " + this.excludeNameChips); -> this.fruits undefined


    La fonction attend un paramètre car c'est la seule manière que j'ai trouvé pour résoudre mon problème de "undefined", mais de base, non elle n'avait aucun paramètre...

  6. #6
    Membre du Club
    Homme Profil pro
    Ingénieur systèmes et réseaux
    Inscrit en
    Novembre 2017
    Messages
    124
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 24
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Ingénieur systèmes et réseaux
    Secteur : High Tech - Opérateur de télécommunications

    Informations forums :
    Inscription : Novembre 2017
    Messages : 124
    Points : 46
    Points
    46
    Par défaut
    J'ai trouvé la solution, il suffisait de définir une variable ici :


    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
     
     
    customFilterPredicate(): any{
        const arrayOfExcludeProjectChips = this.excludeProjectChips;

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Utiliser les threads pour créer une fenêtre de LOG ?
    Par davidmarli dans le forum Langage
    Réponses: 4
    Dernier message: 17/08/2011, 16h01
  2. Réponses: 2
    Dernier message: 27/01/2009, 23h45
  3. Réponses: 3
    Dernier message: 04/01/2009, 19h24
  4. Utiliser les Border pour afficher une règle ?
    Par Beleg dans le forum AWT/Swing
    Réponses: 2
    Dernier message: 26/04/2008, 16h14

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo