web-dev-qa-db-fra.com

La directive ngFor restitue-t-elle le tableau entier à chaque mutation?

Disons que nous avons un tableau d'éléments:

items = [
    { title: 'item 1'},
    { title: 'item 2'},
    /* ... */
];

Et il y a un modèle qui rend ce tableau:

<ul>
    <li *ngFor="let item of items">{{item.title}}</li>
</ul>

Angular2 restituera-t-il l'ensemble du tableau si j'ajoute/supprime des éléments via Push/splice ou va-t-il uniquement ajouter/supprimer le balisage pour les éléments correspondants? S'il ne fait que des mises à jour, y a-t-il une différence dans les stratégies de mutation - devrais-je préférer le push/splice au remplacement du tableau? En d'autres termes, ces deux approches sont-elles équivalentes en termes de performances de rendu:

/* 1: mutation */
this.items.Push({ title: 'New Item' });

/* 2: replacement */
var newArray = this.items.slice();
newArray.Push({ title: 'New Item' });

this.items = newArray;
arraysangularngfor
17
admax

Non , il ne s'affiche à nouveau que lorsque le tableau lui-même est remplacé par une instance de tableau différente.

mise à jour

Merci à Olivier Boissé (voir commentaires)

Même lorsqu'une instance de tableau différente est transmise, Angular reconnaît s'il contient les mêmes instances d'élément et ne se rend pas encore.

Voir aussi ceci exemple StackBlitz

Si le IterableDiffer utilisé reconnaît et ajoute ou supprime au début ou au milieu, alors un élément est inséré/supprimé à cet endroit sans restituer tous les autres éléments.

Les animations démontrées dans Plunkers dans les réponses à cette question Comment puis-je animer * ngFor dans angular 2? le démontrent également. En fait, ce type d'animation était un facteur déterminant pour obtenir cette implémentation de cette façon (en plus de l'optimisation générale)

17
Günter Zöchbauer

En plus de la réponse de Gunter, si vous voulez savoir quelle partie de votre interface utilisateur est rendue/re-rendue, vous pouvez avec Chrome (même indépendant de toute lib/framework):

  • Ouvrez votre panneau de débogage
  • Menu (du panneau de débogage)/Plus d'outils/Rendu

Vous devriez alors voir le panneau suivant:

enter image description here

Basculez le Paint Flashing option activée, et amusez-vous avec votre liste.
Si une zone clignote en vert, elle a été peinte/repeinte ????.

EX: Si vous prenez le Plunkr dans la réponse de Gunter: http://plnkr.co/edit/oNm5d4KwUjLpmmu4IM2K?p=preview et basculez le Paint Flashing on, ajoutez un élément à la liste et vous verrez que les éléments précédents ne clignotent pas. (ce qui signifie qu'il n'y a pas de repeindre).

20
maxime1992