Affichez tous les FaceSnaps !
Dans une application web dynamique, il n'est généralement pas possible de prévoir en avance le nombre d'éléments qu'il y aura dans une liste de données retournée par le serveur. Il va souvent vous les renvoyer sous forme de tableau (ou Array, en anglais), et ce sera à vous d'arriver à afficher la liste en entier, qu'il y ait un élément ou mille ! Vous devrez donc itérer sur un tableau pour y arriver, et c'est là où intervient le control flow block@for
.
Au lieu d'avoir trois variables de type FaceSnap
dans votre AppComponent, vous allez créer une seule variable qui contiendra un tableau de type FaceSnap[]
et modifier votre ngOnInit()
pour le remplir :
export class AppComponent implements OnInit {
faceSnaps!: FaceSnap[];
ngOnInit(): void {
this.faceSnaps = [
new FaceSnap(
'Archibald',
'Mon meilleur ami depuis toujours !',
'https://cdn.pixabay.com/photo/2015/05/31/16/03/teddy-bear-792273_1280.jpg',
new Date(),
10
),
new FaceSnap(
'Three Rock Mountain',
'Un endroit magnifique pour les randonnées.',
'https://upload.wikimedia.org/wikipedia/commons/thumb/0/08/Three_Rock_Mountain_Southern_Tor.jpg/2880px-Three_Rock_Mountain_Southern_Tor.jpg',
new Date(),
6
),
new FaceSnap(
'Un bon repas',
'Mmmh que c\'est bon !',
'https://wtop.com/wp-content/uploads/2020/06/HEALTHYFRESH.jpg',
new Date(),
156
)
];
this.faceSnaps[1].setLocation('à la montagne');
}
}
Maintenant, dans le template, au lieu d'insérer plusieurs instances de <app-face-snap>
, vous allez utiliser le code suivant :
@for (faceSnap of faceSnaps; track faceSnap.title) {
[faceSnap]="faceSnap"
}
Regardons de plus près ce qui se passe exactement avec cette syntaxe :
le control flow block
@for
fonctionne un peu comme une bouclefor...of
, c'est-à-dire que, dans ce cas de figure, elle va itérer sur le tableaufaceSnaps
et vous exposer l'élément correspondant à chaque itération sous l'aliasfaceSnap
vous associez ensuite l'élément du tableau à la propriété
faceSnap
du componentle paramètre
track
permet à Angular d'identifier les différents éléments du tableau grâce à une propriété unique — puisque notre modèle FaceSnap n'a pas encore de propriétéid
, on utilisera letitle
comme propriété unique (pour notre exemple simple où l'on sait que c'est le cas !)
Pour éclaircir un peu les choses, voici un exemple avec un alias plus parlant :
@for (faceSnapElement of faceSnaps; track faceSnapElement.title) {
[faceSnap]="faceSnapElement"
}
Syntaxe bonus !
Puisque nos éléments HTML de component ne nécessitent pas de contenu entre leurs balises d'ouverture et de fermeture, vous pouvez utiliser la syntaxe "self-closing" pour rendre votre template plus propre et plus facile à lire :
@for (faceSnap of faceSnaps; track faceSnap.title) {
[faceSnap]="faceSnap"
}
Et voilà ! Votre application peut maintenant gérer un tableau de FaceSnap de longueur indéfinie. N'hésitez pas à tester en rajoutant autant de FaceSnaps que vous voulez !
En résumé
Le control flow block
@for
vous permet d'insérer un élément dans le DOM pour chaque élément dans un tableau.La syntaxe
element of array
vous donne accès à l'élément de chaque itération, vous permettant de l'injecter dans un component, par exemple.Le paramètre
track
demande une propriété qui sera unique pour chaque élément du tableau (qui sera souvent mais pas toujours sonid
, s'il en a un)
Dans le chapitre suivant, nous ajouterons du style dynamique grâce à une nouvelle directive !