Ce document présente l'utilisation de la directive *ngFor dans Angular 4 pour itérer sur des tableaux et afficher des éléments dynamiques. Il met en évidence la création de variables locales pour gérer les éléments, tels que le premier et le dernier, et fournit des exemples de code pour illustrer ces concepts. De plus, des informations sur la manière d'afficher des tableaux et des objets dans un modèle Angular sont également incluses.

1. vertika.org by Jean Garutti -- Angular 4 -- 08/28/17 -- 1
Angular 4
ngFor

2. info@vertika.org
-- Angular 4 -- -- 2by Jean Garutti
ngFor
Simple, enfantin
Et vraiment fort
Jean Garutti – vertika.org

3. info@vertika.org
-- Angular 4 -- -- 3by Jean Garutti
Je répète, je répète

4. info@vertika.org
-- Angular 4 -- -- 4by Jean Garutti
 C’est une directive
qui produit
un élément de tableau,
itérant à travers
chaque élément
à l'intérieur.
ngFor

5. info@vertika.org
-- Angular 4 -- -- 5by Jean Garutti
 Pour des classes multiples,
vous pouvez créer un tableau
et mettre ces classes à l'intérieur
pour appliquer à votre liste
itérative.
 Vous pouvez ensuite combiner
cela avec * ngFor susmentionné.
ngFor, classes multiples

6. info@vertika.org
-- Angular 4 -- -- 6by Jean Garutti
1. <div *ngFor = "let
whiskey of whiskeyCat"
(click) =
"setSelectedWhiskey(whi
skey)" class="product">
2.3. <img (click)="onClick($event)" id="{{ whiskey.imgsrc }}" src="{{ whiskey.imgsrc }}">
4. <h1> {{whiskey.whiskeyName}} </h1>
5. <h1> ${{whiskey.price}} </h1>
6. {{whiskey.description}}
7. {{whiskey.rating}}
8. <span> <a (click) ="selectWhiskey(whiskey)" class ="ion-edit"> </a> </span>
9. </div>
ngFor

7. info@vertika.org
-- Angular 4 -- -- 7by Jean Garutti
1. <div *ngFor = "let whiskey of whiskeyCat" (click) = "setSelectedWhiskey(whiskey)" class="product">
2.
3. <img (click)="onClick($event)"
id="{{ whiskey.imgsrc }}"
src="{{ whiskey.imgsrc }}">
4. <h1> {{whiskey.whiskeyName}} </h1>
5. <h1> ${{whiskey.price}} </h1>
6. {{whiskey.description}}
7. {{whiskey.rating}}
8. <span> <a (click) ="selectWhiskey(whiskey)"
class ="ion-edit"> </a> </span>
9. </div>
ngFor

8. info@vertika.org
-- Angular 4 -- -- 8by Jean Garutti
 Il fait partie de la syntaxe
du modèle Angular.
 Il crée une variable locale
qui peut être référencée
n'importe où
dans ce modèle spécifique.
let

9. info@vertika.org
-- Angular 4 -- -- 9by Jean Garutti
 Vous créez l'index i
et il le conserve
comme référence
au whisky actuel.
 Tout cela se fait sous le
couvert de cette directive.
let

10. info@vertika.org
-- Angular 4 -- -- 10by Jean Garutti
 Et si nous voulions
styliser le premier
et le dernier élément
de notre directive
ngFor ?
let

11. info@vertika.org
-- Angular 4 -- -- 11by Jean Garutti
 Ceci est relativement simple
en utilisant let de nouveau
pour affecter les premiers
éléments à la variable first
 Et last
pour la dernière variable.
Let le premier et le dernier élément

12. info@vertika.org
-- Angular 4 -- -- 12by Jean Garutti
1. <ul>
2. <li *ngFor="let item of items;
let i = index;
let firstItem = first;
let lastItem = last"
[ngClass]="{ active: firstItem }">
3. {{ i }} {{ firstItem }}
{{ lastItem }} {{ item }}
4. </li>
5. </ul>
Let

13. info@vertika.org
-- Angular 4 -- -- 13by Jean Garutti
 Que faire si vous avez un tableau
 ou un ensemble d'objets ?
 Comment les afficher dans un
modèle?
 La directive *ngFor est pratique.
 Voici comment afficher un tableau :
*ngFor et iterables

14. info@vertika.org
-- Angular 4 -- -- 14by Jean Garutti
1. @Component({
2. // Other component properties removed.
3. template: `
4. <h1>Hey guys!</h1>
5. <ul>
6. <li *ngFor="let arr of myArr">{{ arr }}
7. </li>
8. </ul>
9. `,
10. })
11. export class AppComponent {
12. myArr = ['him','hers','yours','theirs'];
13. }
Interpolation, d’un Array simple

15. info@vertika.org
-- Angular 4 -- -- 15by Jean Garutti
 en 7 langues
 en présentiel
ou en e-learning
 par des experts
Pour la suite, inscrivez-vous
aux cours Angular 4

16. info@vertika.org
-- Angular 4 -- -- 16by Jean Garutti