Boucles avec @for
Affichez des listes avec @for et des expressions track.
Boucles avec @for est une leçon Angular Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Angular Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Angular Academy comprend 4 leçons au total.
Parcourir une collection avec for
Le bloc at-for répète le contenu pour chaque élément d'une collection. Il remplace l'ancienne directive *ngFor et nécessite une expression track.
Syntaxe de base de for
Écrivez un symbole arobase, le mot for, puis item of items, et une clause track obligatoire qui indique une clé unique.
// @for (item of items; track item.id) {
// <li>{{ item.name }}</li>
// }Pourquoi track est obligatoire
L'expression track indique à Angular comment identifier chaque élément lors des modifications, afin de réutiliser les nœuds du DOM au lieu de les recréer. Cela améliore considérablement les performances.
Suivre par identité
Si les éléments ne possèdent pas d'identifiant stable (par exemple une liste de chaînes primitives), vous pouvez effectuer le suivi à partir de l'élément lui-même.
// @for (name of names; track name) {
// <li>{{ name }}</li>
// }Le bloc empty
Un bloc at-empty s'affiche lorsque la collection ne contient aucun élément. Il suit l'accolade fermante du bloc at-for.
// @for (item of items; track item.id) {
// <li>{{ item.name }}</li>
// } @empty {
// <li>No items found</li>
// }Variables contextuelles
Dans un bloc at-for, plusieurs variables utiles sont disponibles, notamment index, count, first, last, even et odd. Capturez-les avec let.
// @for (item of items; track item.id; let i = $index) {
// <li>{{ i }}: {{ item.name }}</li>
// }La variable index
La valeur dollar-index donne la position de l'élément actuel, en commençant à zéro, et est souvent associée à une variable locale comme indiqué précédemment.
first et last
Les valeurs booléennes dollar-first et dollar-last valent true pour le premier et le dernier élément, ce qui est pratique pour le style ou les séparateurs.
even et odd
Les valeurs booléennes dollar-even et dollar-odd facilitent l'application de styles alternés aux lignes.
Parcourir un signal
La collection peut provenir d'un signal : appelez-le simplement dans l'expression for.
// @for (todo of todos(); track todo.id) {
// <li>{{ todo.text }}</li>
// }Avantage en matière de performances
Comme track est obligatoire, le nouvel at-for est plus rapide que *ngFor sans trackBy, car Angular sait toujours comment associer les éléments aux nœuds du DOM.
Vérification rapide : parcours
L'obligation du bloc for.
Récapitulatif : parcours
Vous avez appris le bloc at-for avec son expression track obligatoire, le bloc at-empty pour les collections vides et les variables contextuelles comme index, first, last, even et odd. Il remplace *ngFor. Ensuite : effectuer une sélection avec at-switch.
Questions Fréquemment Posées
La leçon « Boucles avec @for » est-elle gratuite ?
Oui — le texte complet de « Boucles avec @for » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Angular Academy, passe à CoddyKit PRO. Le cours Angular Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Boucles avec @for » ?
Affichez des listes avec @for et des expressions track. Tu pratiques Angular Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Angular Academy ?
Aucune expérience préalable n'est requise. Angular Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.
Combien de temps prend la leçon « Boucles avec @for » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Angular Academy ?
Oui. Chaque leçon Angular Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.