Découvrir Angular 2

Créer des boucles sur un tableau

Testez gratuitement nos 1271 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Vous pouvez itérer sur une collection pour faire de l'affichage. Les outils sont toujours et encore disponibles sous Angular, tout en ayant un peu évolués.
06:28

Transcription

C'est pas mal définir des variables, de les exposer, et de les récupérer dans un template. On peut aussi tout à fait créer des collections, et puis venir les travailler, et les itérer surtout, ça c'est très intéressant. Comment on va itérer ? D'abord, on va se créer une petite collection. La collection, on va l'appeler pour le moment ; collection. Attention, des fois on peut avoir des problèmes avec le taux de complétion, pensez bien à revenir en arrière si jamais vous avez la même erreur que moi. Revenez juste en arrière sur votre nom. Qu'est-ce qu'une collection ? Une collection c'est un area, qui peut être un area de tout ce qu'on veut. Voilà comment ça fonctionne, on va définir ici que c'est un area, et on mettra any à l'intérieur, pour définir qu'il peut avoir à l'intéreur, n'importe quoi. Any c'est le terme qu'on peut utiliser quasiment tout le temps, pour définir qu'on peut mettre ce qu'on veut dedans. Quand vous aurez créer votre collection, maintenant il va falloir l'initialiser. Var collection va être égale à une collection, qui va bien sûr, avoir à l'intérieur, des choses. Si vous ne mettez rien, vous remarquez qu'ici, ça vous crie dessus parce que, il doit y avoir quelque chose dedans. C'est obligatoire. Vous avez défini any pour dire que vous pouvez mettre tout et n'importe quoi, c'est pas figé sur un modèle particulier. Mais il faut quelque chose. On va créer ici simplement, des objets. Alors on va mettre trois objets, et ici on va créer des livraisons, on va se créer une petite application livreur, qui va être très simple. On va avoir des livraisons, on va pouvoir dire si elles ont démarré, si elles sont terminées, livrées, etc. On va partir du principe qu'on est un petit restaurant, et on va gérer nos petites livraisons comme ça. On pourra en rajouter plus tard. Ca permettra à nos livreurs de savoir ce qu'il y a à livrer, et de venir cliquer pour dire qu'ils ont vraiment livré le client, ça c'est plutôt cool. Et pourquoi pas, on pourrait en faire une application mobile plus tard. On a plein d'ambition. Alors ici, qu'est-ce qu'on va avoir ? On va simplement avoir une référence, on pourra mettre comme ça ; référence , qui va être simplement une string, et pourquoi pas derrière, on va avoir ici un nom de client, si on en a envie. Donc ; name, comme ça. Ca bien sûr on va le répercuter plusieurs fois d'affilée, et puis on va faire simplement, des petites choses très simples, ici on mettra 1, 2, 3, 4 , ici on va mettre 3, 4, 5, 6 Et puis enfin, on va mettre 5, 6, 7, 8. Voilà. Ca nous fait des petites références, et pour le nom vous mettez Thomas, vous mettez ici ; Gabrielle. Gabrielle décidément je n'arrive pas à l'écrire. Et enfin on va mettre un autre nom, pourquoi pas Éloise . Maintenant qu'on a ça, on a notre petite collection qui est prête, et on va vouloir l'utiliser. Qu'est-ce qui se passe si, cette collection ici, je la place dans une dive, comme ça, ici. Et puis simplement je viens l'interpoler comme on a déjà fait. Notre petite collection en interpole. Puis on va rafraîchir, qu'est-ce qui se passe ? On a des objets, ça c'est plutôt embêtant car on aimerait bien pouvoir voir quelque chose d'intéressant. Je pourrai utiliser tout simplement un petit filtre. On voit bien que ce filtre là ne marchera pas. Bon, OK. Comment on va faire ? Simplement comme ça. Alors attention, les filtres on en a pas encore parlé, je vous le montre parce qu'on est sur les collections, tant qu'à faire. Vous le pipez, on parlera des pipes un petit peu plus tard, et puis vous utilisez simplement le filtre json. Ça c'est génial, ça vous permet de faire du debug. Mais c'est pas ce qu'on veut. On remarque que si on utilise collection comme ça, je me retrouve ici avec des objets, ces objets là, j'ai envie de les itérer. Comment je vais les itérer ? Simplement ici, je vais pouvoir utiliser, on a des petits utilitaires, notamment vous taperez ng comme moi, si vous avez. Et vous aurez ici ng2, sous ng2 vous aurez tous les utilitaires, ça c'est le petit plug-in de John papa qui permet d'avoir toutes les infos, et vous aurez ici les petites déclarations qu'on peut utiliser. Lequel on va utiliser ? On va simplement utiliser le ng for. Le ng4 va nous permettre de définir un item, depuis quelque chose. On va laisser item comme ça, par contre c'est pas off list, c'est off collection, qu'on a définit plus haut dans notre composant. On a exposé la collection, et avec cette déclaration, faites bien attention, il faut l'écrire comme ça en Angular 2, c'est *ng For avec une majuscule = et on va utiliser let item off collection À quoi nous sert l'opérateur let ? Tout simplement, à définir qu'item ne sera disponible qu'à cet emplacement là. Donc, à l'intérieur de l'itération et pas à l'extérieur. Maintenant on va utiliser, comme on l'a déjà fait ici, notre interpolation, on va récupérer item. et les propriétés de nos items, on a la référence et on a le name. On va pouvoir mettre ici, item.reference, là on va mettre reference : et puis ici, mettre nom du client : et on va utiliser item.name Alors, attention, je vous conseille de formater tout ça pour que ce soit propre, sinon, ça ne va pas être joli joli, évidemment, comme ça. Et puis on va enregistrer, et on va aller regarder ce qui se passe. Effectivement, on se retrouve bien ici, avec différentes informations. Si vous voulez les séparer, vous pouvez aussi, ajouter un hr comme ça. Attention c'est auto-fermant, pour avoir des petites lignes de séparation, c'est pas joli joli, mais ça fonctionne, et c'est le principal pour nous, c'est ce qu'on veut. Voyez comment il est très simple de faire de l'itération avec Angular 2 On récapitule, on va simplement créer, donc initialiser une collection, c'est toujours une propriété de notre classe. Ensuite, dans le constructeur, on initialise pour de bon, c'est à dire qu'on va la remplir avec quelque chose de vrai, c'est à dire une vraie collection, avec des objets à l'intérieur. Et enfin, dans notre template sur une dive par exemple, on va venir itérer. Quand vous itérez, c'est cette partie là entière qui va être répétée, autant de fois que vous avez d'items, pour nous c'est trois, si vous en avez plus évidemment, ça sera répété autant de fois que vous avez d'item et ensuite on fait de l'interpolation, c'est très simple, avec les propriétés de nos items. Voilà. Là on a juste ça à faire, c'est pas très compliqué, ça va assez vite. Voyez qu'on peut itérer très facilement une collection.

Découvrir Angular 2

Prenez en main toute la puissance du framework AngularJS. Exploitez ses fonctionnalités, et développez rapidement des applications web robustes et performantes !

2h50 (40 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Spécial abonnés
Date de parution :6 sept. 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !