J'ai une liste simple avec des éléments animés (: entrez &: quittez les animations) dans mon modèle:
this.list = ....
Et un bouton "AJOUTER", qui ouvre un formulaire sous forme de boîte de dialogue modale, et l'utilisateur peut ajouter de nouveaux éléments à la liste.
Après que l'utilisateur clique sur "ENREGISTRER" sur modal, le modèle sera fermé. Après cela, afin de toujours afficher les données les plus récentes (c'est-à-dire dans un cas multi-tab), nous chargeons à nouveau tous les éléments du backend, et nous remettons la liste:
@itemAnimation *ngFor="let item of list;
Dans ce cas, tous les éléments seront à nouveau animés, et pas seulement le nouveau (ou ceux modifiés), car Angular pense que ce sont tous de nouveaux éléments. Comment puis-je animer uniquement les éléments nouveaux et modifiés?
Je sais que je peux rechercher un changement dans ma liste, supprimer et rajouter manuellement les éléments modifiés dans la liste. Mais je recherche un moyen plus simple (peut-être angulaire intégré), qui détecte automatiquement et ne remplace pas les anciens éléments.
3 Réponses :
Vous pouvez essayer de trouver la différence entre this.list et une nouvelle liste de BE. Ensuite, créez this.list.push (item) .
oui c'est une option .. je voudrais voir s'il y a un moyen angulaire de le faire automatiquement ..
Je ne pense pas qu'Angular suivra automatiquement s'il y a un diff. Lorsque vous faites this.list = [...] , il s'agit essentiellement de définir une nouvelle référence dans la variable vers le nouveau tableau. C'est quelque chose que vous devez gérer vous-même. De plus, je ne pense pas que vous ayez même besoin de tout recharger depuis le backend. Si le modèle correspond, il n'est pas nécessaire de passer un nouvel appel.
les données peuvent toujours être modifiées par d'autres (par exemple, les administrateurs). Nous devrions donc toujours charger la nouvelle liste avec n'importe quelle action.
@VitaliiChmovzh sûr qu'il peut -> modifier les opérations de détection
@iLuvLogix Il n'essaiera pas de comparer 2 tableaux au cas où vous le définissez directement, il restituera de manière flagrante la liste entière, ce qui se produit dans ce cas. C'est pourquoi toutes les animations ont été déclenchées.
Je viens de résoudre ce problème dans une application que j'écris. Tout se résume à la mutabilité de vos structures de données.
Je n'entrerai pas trop dans les détails et ne vous donnerai pas la réponse courte ... les directives d'animations angulaires ne fonctionneront PAS comme vous le souhaitez avec des tableaux immuables. Vous devez faire muter les tableaux d'éléments existants plutôt que de transmettre une nouvelle référence à un nouveau tableau lors de la mise à jour de vos données.
Pour y parvenir au niveau des composants, le moyen le plus propre (à mon avis) est de garder la communication de vos composants immuable (utilisez des observables avec le tube async pour passer un nouvel état en aval), mais quand il s'agit en fait de la présentation composant, vous devez faire muter une collection existante et la conserver À côté de vos entrées immuables ... comme ceci:
@Input () collection: any [] <- entrée immuable
mutableCollection: any [] <- collection mutable
En pratique, cela signifie écrire des fonctions mutatives grossières, en prenant soin de n'utiliser que des méthodes de tableaux mutants.
Voici un excellent article mettant en évidence méthodes matricielles mutatives vs non mutantes
Si cela n'a pas de sens, je peux vous montrer du code mettant en évidence les différences entre la mise à jour mutuelle et immuable d'un tableau, jetez simplement un commentaire ici.
Vous pouvez utiliser la fonction trackBy en tandem avec * ngFor. Selon Docs: https://angular.io/guide/template-syntax#ngfor -avec-trackby