• 10 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 13/06/2022

Affichez des listes

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

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 la directive*ngFor.

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() {
this.faceSnaps = [
{
title: 'Archibald',
description: 'Mon meilleur ami depuis tout petit !',
imageUrl: 'https://cdn.pixabay.com/photo/2015/05/31/16/03/teddy-bear-792273_1280.jpg',
createdDate: new Date(),
snaps: 0,
location: 'Paris'
},
{
title: 'Three Rock Mountain',
description: 'Un endroit magnifique pour les randonnées.',
imageUrl: 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/08/Three_Rock_Mountain_Southern_Tor.jpg/2880px-Three_Rock_Mountain_Southern_Tor.jpg',
createdDate: new Date(),
snaps: 6,
location: 'la montagne'
},
{
title: 'Un bon repas',
description: 'Mmmh que c\'est bon !',
imageUrl: 'https://wtop.com/wp-content/uploads/2020/06/HEALTHYFRESH.jpg',
createdDate: new Date(),
snaps: 0
}
];
}
}

Maintenant, dans le template, au lieu d'insérer plusieurs instances de  <app-face-snap> , vous allez utiliser le code suivant :

<app-face-snap *ngFor="let faceSnap of faceSnaps" [faceSnap]="faceSnap"></app-face-snap>

Regardons de plus près ce qui se passe exactement avec cette syntaxe :

  • la directive  *ngFor  fonctionne un peu comme une boucle  for...of  , c'est-à-dire que, dans ce cas de figure, elle va itérer sur le tableau  faceSnaps  et vous exposer l'élément correspondant à chaque itération sous l'alias  faceSnap

  • vous associez ensuite l'élément du tableau à la propriété  faceSnap  du component.

Pour éclaircir un peu les choses, voici un exemple avec un alias plus parlant :

<app-face-snap *ngFor="let faceSnapElementInArray of faceSnaps" [faceSnap]="faceSnapElementInArray"></app-face-snap>

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é

  • La directive  *ngFor  vous permet d'insérer un élément dans le DOM pour chaque élément dans un tableau.

  • La syntaxe  let element of array  vous donne accès à l'élément de chaque itération, vous permettant de l'injecter dans un component, par exemple.

Dans le chapitre suivant, nous ajouterons du style dynamique grâce à une nouvelle directive !

Exemple de certificat de réussite
Exemple de certificat de réussite