Angular - 2.26-Produire des listes avec ngFor.

Avec toutes ces directives apprises, voyons maintenant la dernière directive intégrée pour le moment. Une directive importante cependant, il est dit que nous pouvons cliquer sur le bouton d'ajout de serveur mais nous n'ajoutons pas réellement de serveurs à notre liste ici, n'est-ce pas ? Cette liste ne s'agrandit pas. Elle est totalement statique. Nous pouvons changer cela avec la directive ngFor. Voyons donc comment cela fonctionne.

Dans notre composant serveur, ici, nous allons maintenant ajouter manuellement notre composant app-server deux fois. Il serait plus agréable d'avoir un tableau de serveurs qui l'ajoute dynamiquement. Donc dans le composant serveurs ici, je vais ajouter une nouvelle propriété servers, et c'est un tableau. Et ici je pourrais avoir mon serveur de test et mon Testserver 2 peut-être. Et quand on échange un nouveau serveur ici, je veux en fait accéder à ce tableau de serveurs et push un nouveau serveur dessus. Et cela devrait bien sûr utiliser le servername que j'ai configuré.

Maintenant, avec ceci, j'ai un tableau de serveurs. Ce serait maintenant génial si nous pouvions répliquer le composant app-server aussi souvent que nécessaire pour avoir un serveur pour chaque élément du tableau. Donc deux au départ, puis un nouveau pour chaque serveur que nous ajoutons. Nous pouvons le faire. Je vais me débarrasser du deuxième serveur d'applications ici et sur le premier je vais placer une autre directive avec une étoile parce que c'est aussi une directive structurelle qui modifie le dom lui-même.

C'est la directive ngFor. La syntaxe de base de la directive ngFor ressemble à ceci. Nous définissons une variable temporaire pour l'intérieur d'une boucle en lui donnant le nom que vous souhaitez comme serveur, par exemple, et ensuite of Servers. Servers est la propriété que nous avons définie dans le fichier TypeScript et ceci va maintenant boucler à travers tous les éléments dans ce tableau et assigne l'élément individuel à cette variable dynamique du serveur. Donc c'est juste comme si vous pouvez savoir que cette boucle à partir d'un code JavaScript normal, la boucle for.

Cette variable serveur peut maintenant être utilisée dans le modèle mais ici nous n'en avons pas vraiment besoin pour être honnête. Nous apprendrons bientôt dans la prochaine section comment nous pouvons transmettre des données à nos propres composants pour qu'ils les produisent. Donc, pour l'instant, nous n'en aurons pas besoin. Mais une chose que nous devrions voir, c'est que si je sauvegarde ce fichier et que nous retournons à notre application, nous en voyons toujours deux parce que nous commençons avec deux. Mais si j'ajoute d'autres serveurs, vous voyez que notre liste s'allonge et nous pouvons cliquer dessus aussi souvent que nous le voulons.

Bien sûr, le contenu de chaque serveur est toujours statique car nous ne pouvons pas passer les données comme le serverName à ce composant. Mais c'est quelque chose que nous apprendrons dans la prochaine section du cours quand nous plongerons plus profondément dans les composants et nous apprendrons comment nous pouvons créer nos propres propriétés sur les composants

Nous pouvons alors définir depuis l'extérieur une fonctionnalité ce qui serait génial à avoir ici. Nous allons donc nous pencher sur cette question dans la prochaine section du cours. Mais avant cela, mettons en pratique ce que nous avons appris dans les dernières vidéos, et puis nous allons également définir notre projet de cours avant de nous plonger plus profondément dans les composants et les liaisons de données à nouveau.