NgFor ne met pas à jour les données avec Pipe dans Angular2

Dans ce scénario, j'affiche une liste d'étudiants (tableau) dans la vue avec ngFor:

<li *ngFor="#student of students">{{student.name}}</li>

C'est merveilleux qu'il se mette à jour chaque fois que j'ajoute un autre étudiant à la liste.

Cependant, lorsque je lui donne un pipeà filterpar le nom de l'élève,

<li *ngFor="#student of students | sortByName:queryElem.value ">{{student.name}}</li>

Il ne met pas à jour la liste tant que je n'ai pas tapé quelque chose dans le champ de filtrage du nom de l'élève.

Voici un lien vers plnkr .

Hello_world.html

<h1>Students:</h1>
<label for="newStudentName"></label>
<input type="text" name="newStudentName" placeholder="newStudentName" #newStudentElem>
<button (click)="addNewStudent(newStudentElem.value)">Add New Student</button>
<br>
<input type="text" placeholder="Search" #queryElem (keyup)="0">
<ul>
    <li *ngFor="#student of students | sortByName:queryElem.value ">{{student.name}}</li>
</ul>

sort_by_name_pipe.ts

import {Pipe} from 'angular2/core';

@Pipe({
    name: 'sortByName'
})
export class SortByNamePipe {

    transform(value, [queryString]) {
        // console.log(value, queryString);
        return value.filter((student) => new RegExp(queryString).test(student.name))
        // return value;
    }
}

Pour bien comprendre le problème et les solutions possibles, nous devons discuter de la détection de changement angulaire - pour les tuyaux et les composants.

Détection de changement de tuyau

Tuyaux sans état / purs

Par défaut, les tubes sont sans état / purs. Les tuyaux sans état / purs transforment simplement les données d'entrée en données de sortie. Ils ne se souviennent de rien, donc ils n'ont aucune propriété - juste une transform()méthode. Angular peut donc optimiser le traitement des tuyaux sans état / purs: si leurs entrées ne changent pas, les tuyaux n'ont pas besoin d'être exécutés lors d'un cycle de détection de changement. Pour un tuyau tel que {{power | exponentialStrength: factor}}, poweret factorsont des entrées.

Pour cette question, "#student of students | sortByName:queryElem.value", studentset queryElem.valuesont entrées, et le tuyau sortByNameest sans état / pur. studentsest un tableau (référence).

• Lorsqu'un étudiant est ajouté, la référence du tableau ne change pas - studentsne change pas - donc le tube sans état / pur n'est pas exécuté.
• Quand quelque chose est tapé dans l'entrée du filtre, queryElem.valuechange, donc le tube sans état / pur est exécuté.

Une façon de résoudre le problème du tableau est de changer la référence du tableau chaque fois qu'un étudiant est ajouté - c'est-à-dire de créer un nouveau tableau chaque fois qu'un étudiant est ajouté. Nous pourrions le faire avec concat():

this.students = this.students.concat([{name: studentName}]);

Bien que cela fonctionne, notre addNewStudent()méthode ne devrait pas avoir à être implémentée d'une certaine manière simplement parce que nous utilisons un tube. Nous voulons utiliser push()pour ajouter à notre tableau.

Tuyaux avec état

Les tuyaux avec état ont un état - ils ont normalement des propriétés, pas seulement une transform()méthode. Ils peuvent avoir besoin d'être évalués même si leurs entrées n'ont pas changé. Lorsque nous spécifions qu'un tube est avec état / non pur - pure: false- alors chaque fois que le système de détection de changement d'Angular vérifie un composant pour les modifications et que ce composant utilise un tube avec état, il vérifie la sortie du tube, si son entrée a changé ou non.

Cela ressemble à ce que nous voulons, même si c'est moins efficace, car nous voulons que le tube s'exécute même si la studentsréférence n'a pas changé. Si nous rendons simplement le tube avec état, nous obtenons une erreur:

EXCEPTION: Expression 'students | sortByName:queryElem.value  in HelloWorld@7:6' 
has changed after it was checked. Previous value: '[object Object],[object Object]'. 
Current value: '[object Object],[object Object]' in [students | sortByName:queryElem.value

Selon la réponse de @ drewmoore , "cette erreur se produit uniquement en mode dev (qui est activé par défaut à partir de la version bêta-0). Si vous appelez enableProdMode()lors du démarrage de l'application, l'erreur ne sera pas levée." La documentation pour l'ApplicationRef.tick() état:

En mode développement, tick () effectue également un deuxième cycle de détection de changement pour s'assurer qu'aucun autre changement n'est détecté. Si des modifications supplémentaires sont prises en compte au cours de ce deuxième cycle, les liaisons dans l'application ont des effets secondaires qui ne peuvent pas être résolus en une seule passe de détection des modifications. Dans ce cas, Angular renvoie une erreur, car une application Angular ne peut avoir qu'une seule passe de détection de changement pendant laquelle toute la détection de changement doit se terminer.

Dans notre scénario, je pense que l'erreur est fausse / trompeuse. Nous avons un tube avec état, et la sortie peut changer chaque fois qu'elle est appelée - cela peut avoir des effets secondaires et ce n'est pas grave. NgFor est évalué après le tube, donc cela devrait fonctionner correctement.

Cependant, nous ne pouvons pas vraiment développer avec cette erreur lancée, donc une solution de contournement consiste à ajouter une propriété de tableau (c'est-à-dire, un état) à l'implémentation du tube et à toujours renvoyer ce tableau. Voir la réponse de @ pixelbits pour cette solution.

Cependant, nous pouvons être plus efficaces, et comme nous le verrons, nous n'aurons pas besoin de la propriété array dans l'implémentation du tube, et nous n'aurons pas besoin d'une solution de contournement pour la détection de double changement.

Détection de changement de composant

Par défaut, à chaque événement du navigateur, la détection de changement angulaire passe par chaque composant pour voir s'il a changé - les entrées et les modèles (et peut-être d'autres choses?) Sont vérifiés.

Si nous savons qu'un composant ne dépend que de ses propriétés d'entrée (et des événements de modèle), et que les propriétés d'entrée sont immuables, nous pouvons utiliser la onPushstratégie de détection des changements beaucoup plus efficace . Avec cette stratégie, au lieu de vérifier chaque événement du navigateur, un composant est vérifié uniquement lorsque les entrées changent et lorsque les événements de modèle se déclenchent. Et, apparemment, nous n'obtenons pas cette Expression ... has changed after it was checkederreur avec ce paramètre. Cela est dû au fait qu'un onPushcomposant n'est pas vérifié à nouveau tant qu'il n'est pas à nouveau "marqué" ( ChangeDetectorRef.markForCheck()). Ainsi, les liaisons de modèle et les sorties de canal avec état ne sont exécutées / évaluées qu'une seule fois. Les tuyaux sans état / purs ne sont toujours pas exécutés à moins que leurs entrées ne changent. Nous avons donc encore besoin d'un tube avec état ici.

C'est la solution proposée par @EricMartinez: pipe avec état avec onPushdétection de changement. Voir la réponse de @ caffinatedmonkey pour cette solution.

Notez qu'avec cette solution, la transform()méthode n'a pas besoin de renvoyer le même tableau à chaque fois. Je trouve cela un peu étrange cependant: un tube avec état sans état. En y réfléchissant un peu plus ... le tube avec état devrait probablement toujours renvoyer le même tableau. Sinon, il ne peut être utilisé qu'avec des onPushcomposants en mode développement.

Donc après tout ça, je pense que j'aime une combinaison des réponses de @ Eric et @ pixelbits: pipe avec état qui renvoie la même référence de tableau, avec onPushdétection de changement si le composant le permet. Étant donné que le tube avec état renvoie la même référence de tableau, le tube peut toujours être utilisé avec des composants qui ne sont pas configurés avec onPush.

Plunker

Cela deviendra probablement un idiome Angular 2: si un tableau alimente un tube et que le tableau peut changer (les éléments du tableau qui sont, pas la référence du tableau), nous devons utiliser un tube avec état.

Comme l'a souligné Eric Martinez dans les commentaires, l'ajout pure: falseà votre Pipedécorateur et changeDetection: ChangeDetectionStrategy.OnPushà votre Componentdécorateur résoudra votre problème. Voici un plunkr fonctionnel. Changer en ChangeDetectionStrategy.Always, fonctionne également. Voici pourquoi.

Selon le guide angular2 sur les tuyaux :

Les tuyaux sont sans état par défaut. Nous devons déclarer un tube avec état en définissant la purepropriété du @Pipedécorateur sur false. Ce paramètre indique au système de détection de changement d'Angular de vérifier la sortie de ce tuyau à chaque cycle, si son entrée a changé ou non.

En ce qui concerne le ChangeDetectionStrategy, par défaut, toutes les liaisons sont vérifiées à chaque cycle. Lorsqu'un pure: falsetuyau est ajouté, je pense que la méthode de détection des modifications passe de CheckAlwaysà CheckOncepour des raisons de performances. Avec OnPush, les liaisons du composant ne sont vérifiées que lorsqu'une propriété d'entrée change ou lorsqu'un événement est déclenché. Pour plus d'informations sur les détecteurs de changement, une partie importante de angular2, consultez les liens suivants:

• Détection de changement dans Angular 2
• https://github.com/angular/angular/issues/4746
• La détection des changements réinventé Victor Savkin

Démo Plunkr

Vous n'avez pas besoin de modifier la ChangeDetectionStrategy. L'implémentation d'un Pipe avec état suffit pour que tout fonctionne.

Ceci est un tube avec état (aucune autre modification n'a été apportée):

@Pipe({
  name: 'sortByName',
  pure: false
})
export class SortByNamePipe {
  tmp = [];
  transform (value, [queryString]) {
    this.tmp.length = 0;
    // console.log(value, queryString);
    var arr = value.filter((student)=>new RegExp(queryString).test(student.name));
    for (var i =0; i < arr.length; ++i) {
        this.tmp.push(arr[i]);
     }

    return this.tmp;
  }
}

De la documentation angulaire

Tuyaux purs et impurs

Il existe deux catégories de tuyaux: purs et impurs. Les tuyaux sont purs par défaut. Chaque pipe que vous avez vue jusqu'à présent est pure. Vous rendez un tuyau impur en définissant son drapeau pur sur false. Vous pourriez rendre le FlyingHeroesPipe impur comme ceci:

@Pipe({ name: 'flyingHeroesImpure', pure: false })

Avant de faire cela, comprenez la différence entre pur et impur, en commençant par une pipe pure.

Pure pipes Angular exécute un pur tube uniquement lorsqu'il détecte un changement pur de la valeur d'entrée. Un changement pur est soit une modification d'une valeur d'entrée primitive (chaîne, nombre, booléen, symbole) ou une référence d'objet modifiée (date, tableau, fonction, objet).

Angular ignore les changements dans les objets (composites). Il n'appellera pas de canal pur si vous modifiez un mois d'entrée, ajoutez à un tableau d'entrée ou mettez à jour une propriété d'objet d'entrée.

Cela peut sembler restrictif mais c'est aussi rapide. Une vérification de référence d'objet est rapide - beaucoup plus rapide qu'une vérification approfondie des différences - donc Angular peut rapidement déterminer s'il peut ignorer à la fois l'exécution du tuyau et une mise à jour de vue.

Pour cette raison, un tuyau pur est préférable lorsque vous pouvez vivre avec la stratégie de détection des changements. Lorsque vous ne pouvez pas, vous pouvez utiliser le tuyau impur.

Au lieu de faire pur: faux. Vous pouvez copier en profondeur et remplacer la valeur du composant par this.students = Object.assign ([], NEW_ARRAY); où NEW_ARRAY est le tableau modifié.

Cela fonctionne pour angular 6 et devrait également fonctionner pour d'autres versions angulaires.

Solution de contournement: importez manuellement le tuyau dans le constructeur et appelez la méthode de transformation à l'aide de ce tuyau

constructor(
private searchFilter : TableFilterPipe) { }

onChange() {
   this.data = this.searchFilter.transform(this.sourceData, this.searchText)}

En fait, tu n'as même pas besoin de pipe

Ajoutez un paramètre supplémentaire au tube et modifiez-le juste après le changement de tableau, et même avec un tube pur, la liste sera actualisée

laisser un article | tuyau: paramètre

Dans ce cas d'utilisation, j'ai utilisé mon fichier Pipe in ts pour le filtrage des données. C'est bien meilleur pour les performances que d'utiliser des tuyaux purs. Utilisez dans ts comme ceci:

import { YourPipeComponentName } from 'YourPipeComponentPath';

class YourService {

  constructor(private pipe: YourPipeComponentName) {}

  YourFunction(value) {
    this.pipe.transform(value, 'pipeFilter');
  }
}

créer des tuyaux impurs coûte cher en performance. donc ne créez pas de tuyaux impurs, modifiez plutôt la référence de la variable de données en créant une copie des données lors du changement de données et réaffectez la référence de copie dans la variable de données d'origine.

            emp=[];
            empid:number;
            name:string;
            city:string;
            salary:number;
            gender:string;
            dob:string;
            experience:number;

            add(){
              const temp=[...this.emps];
              const e={empid:this.empid,name:this.name,gender:this.gender,city:this.city,salary:this.salary,dob:this.dob,experience:this.experience};
              temp.push(e); 
              this.emps =temp;
              //this.reset();
            }