NgFor n'a pas de mise à jour des données avec un Tuyau dans Angular2

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

Tuyau De Détection De Changement De

Apatrides/pure Tuyaux

Par défaut, les tuyaux sont apatrides/pure. Apatrides/pure tuyaux de transformer les données d'entrée en données de sortie. Ils ne me souviens pas de quoi que ce soit, de sorte qu'ils n'ont pas de propriétés – juste une transform() méthode. Angulaire peut donc optimiser le traitement des apatrides/pure tuyaux: si leurs entrées ne changent pas, les tuyaux ne doivent pas être exécutées lors d'un changement de cycle de détection. Pour une pipe comme {{power | exponentialStrength: factor}}, power et factor sont entrées.

Pour cette question, "#student of students | sortByName:queryElem.value", students et queryElem.value sont des entrées, et le tuyau sortByName est apatride/pure. students est un tableau (de référence).

• Lorsqu'un élève est ajouté, le tableau référence ne change pas – students ne change pas, donc les apatrides/pure pipe n'est pas exécutée.
• Quand quelque chose est tapé dans le filtre d'entrée, queryElem.value n'changement, d'où les apatrides/pure pipe est exécutée.

Un moyen de corriger le tableau enjeu est de changer le tableau de référence chaque fois qu'un élève est ajoutée, c'est à dire, 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 être mis en œuvre d'une certaine façon, juste parce que nous faisons à l'aide d'un tuyau. Nous voulons utiliser push() à ajouter à notre tableau.

Stateful Tuyaux

Avec état des tuyaux de l'état est -- ils ont normalement des propriétés, et pas seulement un transform() méthode. Ils peuvent avoir besoin d'être évalué même si leurs contributions n'ont pas changé. Quand nous indiquons qu'un canal est dynamique/non-pure – pure: false – quand Angulaire de détection de changement de système vérifie la présence d'un composant pour les changements et le composant utilise avec un état de la pipe, il va vérifier la sortie de la pipe, que son entrée a changé ou pas.

Cela ressemble à ce que nous voulons, même si c'est moins efficace, puisque nous voulons que la pipe à exécuter même si l' students de référence n'a pas changé. Si nous nous contentons de faire la conduite dynamique, 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 @drewmoore réponse, "cette erreur se produit uniquement en dev mode (qui est activé par défaut sous forme de bêta-0). Si vous appelez enableProdMode() quand le démarrage de l'application, l'erreur à ne pas faire jeter." Le docs pour ApplicationRef.tick() état:

Le mode de développement, cochez() effectue un deuxième changement de cycle de détection pour s'assurer qu'aucun autre changement n'est détecté. Si d'autres changements sont ramassés au cours de ce second cycle, des liaisons dans l'app ont des effets secondaires qui ne peut pas être résolu en une seule détection de changement de forfait. Dans ce cas, Angulaire déclenche une erreur, puisque Angulaire de l'application ne peut avoir qu'un changement de détection de passer au cours de laquelle toutes les de la détection de changement doit remplir.

Dans notre scénario, je crois que l'erreur est fausse ou trompeuse. Nous avons avec un état de la pipe, et la sortie peut changer à chaque fois qu'il est appelé, il peut avoir des effets secondaires, et c'est correct. NgFor est évaluée après la pipe, il devrait fonctionner correctement.

Cependant, nous ne pouvons pas vraiment se développer avec cette erreur est générée, donc une solution de contournement consiste à ajouter un tableau de propriété (c'est à dire, de l'état) pour le tuyau de mise en œuvre et toujours le retour de ce tableau. Voir @pixelbits réponse à cette solution.

Cependant, nous pouvons être plus efficaces, et comme nous allons le voir, nous n'aurons pas besoin de la propriété du tableau dans le tuyau de mise en œuvre, et nous n'avons pas besoin d'une solution de contournement pour le double de la détection de changement.

Composant De Détection De Changement De

Par défaut, sur chaque navigateur d'événements, angle de détection de changement passe par tous les composants pour voir si elle a changé – les entrées et les modèles (et peut-être d'autres choses?) sont vérifiées.

Si nous savons qu'un composant ne dépend que de ses propriétés d'entrée (et le modèle d'événements), et que les propriétés d'entrée sont immuables, nous pouvons utiliser le beaucoup plus efficace onPush détection de changement de stratégie. Avec cette stratégie, au lieu de vérifier sur chaque navigateur d'événements, un composant est vérifiée que lorsque les entrées changement et quand le modèle d'événements de déclenchement. Et, apparemment, nous n'avons pas cette Expression ... has changed after it was checked erreur avec ce paramètre. C'est parce qu'un onPush composant n'est pas vérifié à nouveau jusqu'à ce qu'il est "marqué" (ChangeDetectorRef.markForCheck()) de nouveau. Donc Modèle de liaisons dynamique pipe sorties sont exécutés/évaluées qu'une seule fois. Apatrides/pure tuyaux ne sont pas encore exécutés à moins que leurs entrées changement. Nous avons donc encore besoin d'un stateful pipe ici.

C'est la solution @EricMartinez suggéré: stateful pipe avec onPush la détection de changement. Voir @caffinatedmonkey réponse à cette solution.

Notez qu'avec cette solution, les transform() méthode n'a pas besoin de retourner le même tableau à chaque fois. Je trouve cela un peu bizarre mais: avec un état de tuyau sans état. D'y penser un peu plus... une pipe sans doute doit toujours retourner le même tableau. Sinon, il pourrait être utilisé uniquement avec onPush composants en dev mode.

---

Donc après tout ça, je crois que j'aime une combinaison de @Eric et @pixelbits réponses: stateful tuyau qui renvoie la même référence de tableau, avec onPush de la détection de changement si la pièce le permet. Depuis une pipe retourne la même matrice de référence, le tuyau peut toujours être utilisé avec des composants qui ne sont pas configurés avec onPush.

Plunker

Cela va probablement devenir Angulaire à 2 idiome: si un tableau est l'alimentation d'un tuyau, et le tableau peut changer (les éléments du tableau qui est, non pas le tableau de référence), nous devons utiliser avec un état de conduite.

Démo Plunkr

Vous n'avez pas besoin de changer le ChangeDetectionStrategy. Mise en œuvre d'une dynamique de la Pipe est assez pour faire tout.

C'est avec un état de tuyau (pas d'autres modifications ont été apportées):

@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;
  }
}

Une solution: importer Manuellement des Tuyaux dans le constructeur et l'appel de méthode de transformation à l'aide de cette pipe

constructor(
private searchFilter : TableFilterPipe) { }

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

Fait, vous n'avez même pas besoin d'un tuyau

Ajouter à la pipe paramètre supplémentaire, et de le modifier à droite après la matrice de changement, et même avec de la pure pipe, la liste sera actualisée

laisser élément d'éléments | tube:param