Angular ngFor - Apprenez toutes les fonctionnalités, pas seulement pour les tableaux

Dans ce post, nous allons passer en revue la directive de base ngFor, à savoir que nous allons passer en revue ce qui suit :

Qu’est-ce que ngFor fait et quelle est sa syntaxe
Quelles sont les erreurs les plus courantes associées à ngFor
Visibilité des variables
Recherche de la position d’index d’un élément
Comment . dépouiller un tableau en utilisant even et odd
Identifier le first et l’élément last d’une liste
Comment ngFor assure le suivi des éléments, pourquoi cela peut être important pour les performances ?
Comment utiliser trackBy ?
Quand utiliser trackBy ?
Apprenez pourquoi ngFor n’est pas seulement pour les tableaux
Une petite question pour vous à la fin sur l’apprentissage

Alors commençons à plonger dans ngFor ! Ci-dessous, vous pouvez également trouver une version vidéo de ce post si vous préférez, et le code courant de ce post est disponible ici.

Les fonctionnalités de ngFor sont également couvertes dans cette vidéo, jetez-y un œil:

Que pouvons-nous faire avec ngFor?

La directive principale ngFor nous permet de construire des listes et des tableaux de présentation de données dans nos modèles HTML. Prenons par exemple les données suivantes :

Avec ngFor, nous pouvons imprimer ces données à l’écran sous la forme d’un tableau de données, en générant un HTML similaire à celui-ci :

Quelle est la syntaxe de ngFor ?

Pour utiliser ngFor, créons un composant afin d’avoir un modèle HTML fonctionnel:

Ce modèle va générer le tableau HTML que nous avons montré juste au-dessus. Nous pouvons voir dans cet exemple la syntaxe (la plus courante) pour utiliser ngFor :

nous passons à ngFor une expression d’itération
une variable de boucle nommée hero est définie à l’aide du mot-clé let, ce qui est conforme à la syntaxe Javascript
l’expression est sous la forme var i of items, ce qui est cohérent avec la fonctionnalité d’itération de Javascript of

Visibilité des variables

Notez que la variable de boucle hero n’est visible qu’à l’intérieur de la boucle, vous ne pourriez pas y accéder en dehors de la section ngFor.

Erreurs ngFor courantes à surveiller

Si vous avez une formation AngularJs, vous verrez cette erreur plusieurs fois avant de vous habituer à la nouvelle syntaxe Angular :

Can't bind to 'ngFor' since it isn't a known property of 'tr'

C’est parce que vous avez accidentellement soit utilisé item in items au lieu de item of items, soit oublié d’ajouter le mot-clé let au début de l’expression :

Trouver l’index d’un élément de liste

Une exigence très courante est d’ajouter à une liste la position de l’index numérique de son élément. Nous pouvons obtenir l’indice de l’élément courant en utilisant la variable index:

Notez que vous avez besoin du mot clé let pour obtenir la valeur de l’indice, sinon vous obtiendrez une erreur similaire à celle-ci :

Parser Error: Unexpected token = at column ...

Avec ce changement, le HTML généré ressemble maintenant à ce qui suit:

Comment striper un tableau en utilisant even et odd

Une autre fonctionnalité très commune nécessaire lors de la construction de tableaux est de pouvoir striper un tableau en ajoutant une classe css différente aux lignes even ou odd.

Disons qu’au tableau ci-dessus, nous voulons ajouter une classe CSS even si la ligne est paire et la classe CSS odd si la ligne est impaire.

Pour ce faire, nous avons quelques variables disponibles pour cela : even et odd, qui peuvent être utilisées de la manière suivante avec ngClass :

Regardons le HTML généré par ce modèle :

Comme nous pouvons le voir, ngClass a ajouté les classes CSS aux bonnes lignes, comme nous nous y attendions.

Identification du premier et du dernier élément d’une liste

Tout comme la fonctionnalité pair et impair, il existe également deux autres variables qui peuvent être utilisées pour identifier le premier et le dernier élément de la liste :

Ceci ajoutera une classe CSS nommée first au premier élément de la liste, et une classe CSS nommée last au dernier élément de la liste :

Comment fonctionne ngFor lorsque nous ajoutons ou supprimons des éléments de la liste ?

A mesure que la liste d’entrée se modifie, ngFor essaiera d’éviter de créer et de détruire constamment les éléments DOM de la liste, car c’est une opération coûteuse. De plus, lorsque nous passons à ngFor une nouvelle liste, cela ne signifie pas que toute la liste sera reconstruite, c’est-à-dire que tout le DOM sera recréé.

Plusieurs des éléments DOM existants seront réutilisés et seules certaines valeurs à l’intérieur seront écrasées, et la décision est prise pour chaque élément de la liste séparément.

Pour prendre cette décision, Angular doit identifier chaque élément de la liste d’une manière unique, car par exemple si nous passons une nouvelle liste avec un ordre différent, Angular essaiera d’identifier les éléments et de réordonner les éléments DOM de la liste sans les supprimer et les recréer.

Comment les éléments de la liste sont-ils suivis par défaut ?

ngFor par défaut suit les éléments de la liste en utilisant l’identité des objets. Cela signifie que si vous construisez une liste de nouveaux objets à partir de zéro avec exactement les mêmes valeurs que la liste précédente et que vous passez cette liste nouvellement construite à ngFor, Angular ne sera pas capable de dire qu’un élément de liste donné est déjà présent ou non.

Du point de vue de l’identité des objets, la nouvelle liste contient un tout nouvel ensemble d’éléments, complètement différent de l’ensemble précédent. C’est le cas si par exemple nous interrogeons à nouveau les données depuis le backend.

Le suivi par identité d’objet est une bonne stratégie par défaut car Angular n’a aucune information sur l’objet et ne peut donc pas dire quelle propriété il doit utiliser pour le suivi.

Pourquoi cela peut-il être important pour les performances ?

Comme nous le voyons, ngFor fait déjà beaucoup d’optimisations en dehors de la boîte pour essayer de réutiliser les éléments DOM existants autant que possible, mais il le fait en se basant sur l’identité de l’objet.

Dans le cas de modèles avec de grandes listes, ou de listes qui occupent une grande partie de l’écran, nous pourrions, même avec ces optimisations, rencontrer des problèmes de performance et remarquer que l’interface utilisateur est lente en raison de la grande quantité d’éléments DOM créés et détruits.

Si cela se trouve être le cas, nous pouvons configurer ngFor pour effectuer le suivi par autre chose que l’identité de l’objet.

Comment utiliser trackBy?

Nous pouvons fournir notre propre mécanisme de suivi des éléments dans une liste en utilisant trackBy. Nous devons passer une fonction à trackBy, et la fonction prend deux arguments, qui sont un index et l’élément actuel :

Cette mise en œuvre ferait le suivi en fonction de la propriété id.

Quand utiliser trackBy ?

L’utilisation de trackBy c’est une optimisation des performances et n’est généralement pas nécessaire par défaut, elle n’est en principe nécessaire que si l’on rencontre des problèmes de performances.

Disons que vous expédiez vers d’anciens navigateurs mobiles ou d’anciennes versions d’IE : vous pourriez envisager d’appliquer trackBy par précaution dans vos plus grands tableaux, mais cela dépend vraiment de votre système et du cas d’utilisation.

Est-ce que ngFor est uniquement pour les tableaux ?

Dans cet exemple, nous avons passé à ngForun tableau d’objets Javascript, mais en fait, nous n’avons pas nécessairement besoin de passer un tableau à ngFor pour que cela fonctionne.

Nous pouvons lui passer n’importe quel type d’Iterable Javascript en général, y compris les Iterables qui sont créés par le framework lui-même. Pour illustrer cela, nous allons définir une directive pour un élément de configuration appelé hero:

Nous pouvons maintenant utiliser cet élément de configuration dans notre modèle de la manière suivante :

Maintenant, interrogeons ces données à partir des éléments de configuration en utilisant @ContentChildren:

Vous voyez ce qui s’est passé ici ? Il s’avère que le QueryList est une classe qui fait partie d’Angular et qui est elle-même un Iterable ! Donc, bien que nous puissions l’utiliser de manière programmatique dans la classe de composant, nous pouvons également le passer directement à ngFor et itérer sur lui directement.

Et la même chose pourrait être faite avec n’importe quel autre Iterable dans notre programme.

J’espère que vous avez apprécié ce post, je vous invite à jeter un coup d’œil à la liste ci-dessous pour d’autres posts et ressources similaires sur Angular.

Et si vous souhaitez connaître des fonctionnalités Angular Core plus avancées comme ngFor, nous vous recommandons de consulter le cours Angular Core Deep Dive, où nous couvrons toutes les directives Angular Core dans les moindres détails.

Je vous invite à vous inscrire à notre newsletter pour être informé de la sortie d’autres posts comme celui-ci :

Si vous commencez à apprendre Angular, jetez un œil au cours Angular pour débutants :

Autres posts sur Angular

Si vous avez apprécié ce post, jetez également un œil à d’autres posts populaires qui pourraient vous intéresser :

Routeur Angulaire – Comment construire un menu de navigation avec Bootstrap 4 et des routes imbriquées
Routeur Angulaire – Visite guidée étendue, Éviter les pièges courants
Composants Angular – Les fondamentaux
Comment construire des applications Angular en utilisant les services de données observables – Pièges à éviter
Introduction à Angular Forms – Template Driven vs Model Driven
Angular ngFor – Apprenez toutes les fonctionnalités, y compris trackBy, pourquoi n’est-il pas seulement pour les tableaux ?
Angular Universal en pratique – Comment construire des applications monopages adaptées au référencement avec Angular
Comment fonctionne vraiment la détection de changement d’Angular ?
Cours accéléré sur les définitions de type de Typescript 2 – Types et Npm, comment sont-ils liés ? @types, types opt-in du compilateur : Quand utiliser chacun et pourquoi ?