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:

---

1 2 3 4

this.dataSource.filterPredicate = this.customFilterPredicate( this.excludeNameChips // CECI );

---

Merci pour l'aide :)

Code:

---

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 }

---

En effet, merci c'est fonctionnel avec :

Code:

---

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:

---

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) {}

---

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:

---

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

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...

J'ai trouvé la solution, il suffisait de définir une variable ici ;) :

Code:

---

1 2 3 4

customFilterPredicate(): any{ const arrayOfExcludeProjectChips = this.excludeProjectChips;

---