La construction for dans Angular

La boucle sur les éléments d'un tableau peut également être lancée à l'aide de la construction @for.

Essayons en pratique. Supposons à nouveau que dans notre composant se trouve un tableau :

export class AppComponent {
	public arr: number[] = [1, 2, 3, 4, 5];
}

Examinons la syntaxe de la construction :

@for () {
	balises
}

Spécifions le tableau à parcourir et la variable dans laquelle les éléments seront placés :

@for (elem of arr) {
	balises
}

Cependant, ce n'est pas encore tout. Pour un fonctionnement correct d'Angular, nous devons indiquer une commande spéciale track. Après celle-ci, nous devons spécifier une valeur unique pour chaque élément du tableau. Ceci est nécessaire pour qu'Angular puisse travailler de manière plus optimale avec le DOM. Prenons comme valeur unique le numéro de l'élément du tableau. Pour cela, nous devons indiquer la variable $index. Ainsi, voici notre code final :

@for (elem of arr; track $index) {
	<div>
		{{ elem }}
	</div>
}

Soit un tableau :

export class AppComponent {
	public arr: numbers[] = [1, 2, 3, 4, 5];
}

Affichez chaque élément de ce tableau dans un paragraphe séparé.