J'ai un fichier JSON qui contient les données de certains coureurs. J'essaye de filtrer certaines données en utilisant la méthode suivante:

performFilterByRunnerName(filterBy: string):IRunners[]{
    return this.runners.filter(x=>x.runnerName=filterBy);
}

Une partie du HTML est:

<input #filterinputrunner id="runnerFilter" type="text" 
  (change) = "performFilterByRunnerName(filterinputrunner.value)"
  [ngModel]='listRunnerFilter'>

Et j'ai une liste de type IRunner (interface) qui contient les données du coureur. Lors de la modification de la valeur input, ce qui se passe, c'est que le champ runnerName change pour tous les runners au lieu de filtrer les coureurs avec la valeur d'entrée. Qu'est-ce que je fais mal?

0
Yaniv Eliav 20 nov. 2018 à 16:07

3 réponses

Meilleure réponse
(x=>x.runnerName=filterBy)

Vous souhaitez comparer et non attribuer

(x=>x.runnerName==filterBy)

Devrait être correct. Vote de clôture.

2
Antoniossss 20 nov. 2018 à 13:15

Si vous utilisez change, il ne mettra pas à jour les résultats filtrés au fur et à mesure que vous tapez, il ne le mettra à jour que sur blur. Si vous souhaitez que la liste soit mise à jour au fur et à mesure que vous tapez, vous devez envisager d'utiliser keyup.

(keyup) = "performFilterByRunnerName(filterinputrunner.value)"

Filtrez également en fonction de la recherche de filtre incluse dans le résultat et non de la recherche de chaîne exacte. Cela donnerait de meilleurs résultats de recherche:

onFilterChange(filterBy) {
  this.filteredUsers = [...this.users.filter(user => user.name.indexOf(filterBy) > -1)];
}

Voici un Exemple de StackBlitz pour votre réf.

1
SiddAjmera 20 nov. 2018 à 13:39

Votre condition de filtre semble incorrecte. Vous attribuez (=) la propriété filterBy à chacun de vos coureurs.

Ce que vous voulez, c'est une condition d'égalité (===).

return this.runners.filter(x => x.runnerName === filterBy);

1
ovidiup 20 nov. 2018 à 13:16