La boucle for en Angular

AngularJS et Angular moderne utilisent deux API de template distinctes : AngularJS utilise ng-repeat, tandis qu’Angular moderne prend en charge le bloc @for dans les versions qui incluent cette syntaxe. Pour traiter des tableaux en JavaScript dans la logique de l’application, utilisez une boucle for ou forEach ; ces mécanismes traitent les données, mais ne génèrent pas à eux seuls d’éléments de template.

Identifiez la version d’Angular avant de choisir une boucle

Commencez par identifier le framework utilisé par le projet. AngularJS est l’ancien framework ; il affiche les éléments d’une collection à l’aide de la directive ng-repeat. Angular moderne utilise un autre système de templates. Si la version d’Angular de votre projet prend en charge @for, vous pouvez employer ce bloc pour afficher une collection. Vérifiez que votre version accepte cette syntaxe avant de l’ajouter.

Une boucle JavaScript for ou forEach s’utilise dans la logique d’un composant ou d’un contrôleur pour calculer, transformer ou traiter des valeurs. Pour afficher une collection, choisissez l’API de template correspondant au framework.

Affichez une liste dans AngularJS avec ng-repeat

Dans un template AngularJS, ng-repeat="item in items" crée une copie de l’élément pour chaque valeur de items. Par exemple, le fragment de template <ul><li ng-repeat="item in items">{{ item }}</li></ul> affiche une liste à partir d’une collection fournie par le contrôleur ou le scope. Si items contient ['Apple', 'Banana', 'Cherry'], la page affiche un élément de liste pour chaque fruit. Il s’agit d’une directive AngularJS, et non de la syntaxe d’Angular moderne.

Affichez une liste dans Angular moderne avec @for

Dans un projet Angular moderne dont la version prend en charge le bloc @for, vous pouvez utiliser dans un élément de liste le template @for (item of items; track item.id) { <li>{{ item.name }}</li> }. Ici, items est la collection du composant, item représente l’enregistrement courant et track item.id fournit à Angular une identité stable pour chaque enregistrement lorsque la collection change. Utilisez une clé unique de vos données et adaptez les noms de propriétés au composant. Cet exemple illustre uniquement la syntaxe : il n’a pas été exécuté dans un projet Angular pour cet article. Vérifiez donc sa compatibilité avec la version et la configuration de templates de votre projet.

Utilisez for et forEach en JavaScript pour traiter des tableaux

Utilisez une boucle JavaScript impérative lorsque vous devez calculer ou transformer des valeurs dans la logique de l’application. L’exemple ci-dessous calcule le total d’une collection de prix. Il s’agit d’un exemple JavaScript autonome, qui n’a pas été exécuté pour cet article.

const items = [
  { name: 'Notebook', price: 4 },
  { name: 'Pen', price: 2 }
];

let total = 0;
for (const item of items) {
  total += item.price;
}

console.log(`Total: $${total.toFixed(2)}`);

La boucle lit chaque élément et ajoute son prix à total ; la dernière ligne envoie le montant formaté dans la console JavaScript. Une fonction de rappel passée à forEach permet aussi d’effectuer une opération sur chaque élément du tableau, par exemple items.forEach(item => console.log(item.name)). Utilisez l’une ou l’autre méthode pour traiter des données ; pour afficher des éléments dans un template, utilisez ng-repeat ou un bloc @for pris en charge.

Choisissez une méthode de boucle adaptée à la tâche

Les directives et les blocs de template relient les données d’une collection aux éléments affichés. Les boucles JavaScript exécutent la logique de l’application. Pour modifier les données, passez par l’état du composant ou du contrôleur utilisé par le template.

Questions fréquentes sur les boucles dans Angular

ng-repeat est-il disponible dans Angular moderne ?

ng-repeat est une directive AngularJS. Angular moderne possède sa propre syntaxe de template, notamment @for dans les versions qui la prennent en charge.

Puis-je utiliser une boucle JavaScript for dans un composant Angular ?

Oui. Utilisez-la dans la logique du composant pour effectuer des calculs ou d’autres traitements sur un tableau. Elle ne crée pas d’éléments de template : liez les données obtenues au template, puis utilisez sa syntaxe d’affichage.

Quand utiliser forEach ?

Utilisez forEach lorsqu’une fonction de rappel doit s’exécuter pour chaque élément d’un tableau. Préférez une boucle for classique si le traitement nécessite un contrôle explicite de l’itération. Aucune de ces deux formes n’est une directive d’affichage pour les templates.

Comment ajouter un élément à une collection affichée ?

Mettez à jour la collection détenue par le composant ou le contrôleur, puis laissez la syntaxe de template appropriée afficher les valeurs à jour. La méthode de mise à jour dépend de la façon dont l’application gère son état.