Discussion :

[Whisper40]

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

[krakatoa]

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
  }

[Whisper40]

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

[dukoid]

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

[Whisper40]

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

[Whisper40]

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;