Comment utiliser la directive angulaire ngFor

Angular utilise des directives pour afficher dynamiquement certains éléments HTML sur votre site Web. L'une des directives structurelles que vous pouvez utiliser est ngFor.

La directive ngFor vous permet de répéter le même bloc un nombre de fois spécifié ou de parcourir un tableau d'objets pour afficher leurs détails. C'est un outil puissant que vous pouvez même utiliser pour rendre des objets dans d'autres objets.

Il possède également de nombreuses fonctions qui peuvent être utiles dans des scénarios spécifiques. Cela inclut la recherche du premier et du dernier élément ou le saut de certains éléments.

Comment utiliser ngFor pour parcourir des nombres statiques

La directive ngFor est basée sur la boucle for, l'une des de nombreuses boucles utiles prises en charge par JavaScript

1. Vous pouvez créer une liste dans l'instruction ngFor elle-même. Le code suivant répétera un paragraphe cinq fois, en utilisant les index 0 à 4 :

   <div *ngFor='laisser l'élément de [0, 1, 2, 3, 4]; soit i = indice'>
   <p> Ceci est un paragraphe répété: {{item}} </p>
   </div>

2. Étant donné que la méthode ci-dessus peut ne pas convenir aux grands tableaux, vous pouvez également créer dynamiquement un tableau dans le fichier TypeScript :

   exporter classerExempleClassemet en oeuvreOnInit{
    nombres: tableau<Numéro> = [];
   constructeur() {
   // Ceci créera dynamiquement le tableau suivant :
   // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
   cette.numbers = Déployer(10).remplir(1).map((x, je)=>je);
    }
   }

3. Vous pouvez ensuite parcourir le tableau des nombres dans le HTML :

   <div *ngFor='laisser élément de nombres; soit i = indice'>
   <p>Ceci est un paragraphe répété: {{item}}</p>
   </div>

Comment ignorer ou styliser certains numéros

Vous pouvez utiliser le étrange ou même ngFor variables pour déterminer chaque deuxième nombre. Un scénario dans lequel vous pourriez trouver cela utile est si vous souhaitez styliser chaque ligne paire ou impaire d'un tableau en utilisant une couleur différente.

1. Dans le fichier CSS d'un composant, ajoutez de nouvelles classes CSS. Voici les styles que vous utiliserez pour certains éléments aux index pairs ou impairs :

   .rouge {
    La couleur rouge;
   }
   .bleu { 
    Couleur bleue; 
   }
   

2. Déclarez des variables paires et impaires dans l'instruction ngFor. Ce sont des variables que Angular reconnaîtra. Attribuez la classe CSS rouge aux nombres pairs et la classe CSS bleue aux nombres impairs :

   <div *ngFor='laisser élément de nombres; soit impair = impair; soit pair = pair' [ngClass]="{rouge: pair, bleu: impair}">
   <p> Ceci est un paragraphe répété: {{item}} </p>
   </div>

3. Exécutez votre site Web angulaire en utilisant ng servir et ouvrez-le dans le navigateur Web. Les éléments HTML pairs et impairs alterneront entre les différents styles en fonction de leur classe CSS :
4. Si vous souhaitez ignorer complètement chaque nombre pair, vous pouvez utiliser la directive ngIf. Cela ignorera tous les nombres impairs et n'affichera que les nombres pairs :

   <div *ngFor='laisser élément de nombres; soit pair = pair'>
   <p *ngIf='même'> Ceci est un paragraphe répété: {{item}} </p>
   </div>

Comment compter à rebours

Pour compter à rebours, vous pouvez utiliser des méthodes traditionnelles telles que l'inversion d'une liste ou le décompte dans la boucle à l'aide d'un index.

1. Déclarez une variable d'index dans l'instruction ngFor. Dans le ngFor, commencez par la longueur du tableau et déduisez le nombre d'éléments que vous avez déjà parcourus :

   <div *ngFor="laisser élément de nombres; soit i = indice ;">
   <p> Ceci est un paragraphe répété: {{numbers.length-i-1}} </p>
   </div>

2. Vous pouvez également créer une liste inversée dans le fichier TypeScript :

   exporter classerExempleClassemet en oeuvreOnInit{
    nombres: tableau<Numéro> = [];
    liste inversée: tableau<Numéro> = [];
   constructeur() {
   cette.numbers = Déployer(10).remplir(1).map((x, je)=>je);
   cette.reversedList = cette.numbers.slice().reverse();
    }
   }

3. Itérez sur la liste inversée à l'aide de ngFor :

   <div *ngFor='let élément de reversedList; soit i = indice'>
   <p> Ceci est un paragraphe répété: {{item}} </p>
   </div>

Comment styliser différemment le premier et le dernier élément

Vous pouvez styliser le premier et le dernier élément séparément des autres éléments à l'aide de la première et dernière Variables angulaires. Ceci est une alternative à en utilisant des pseudo-classes CSS Comme :premier enfant.

1. Dans l'instruction ngFor, déclarez les première et dernière variables. Utilisez la directive ngClass pour attribuer les classes CSS bleues et rouges dans les étapes précédentes. Attribuez la classe CSS bleue au premier élément et la classe CSS rouge au dernier élément :

   <div *ngFor='laisser élément de nombres; soit premier = premier; laisser durer = dernier' [ngClass]= "{bleu: premier, rouge: dernier}">
   <p> Ceci est un paragraphe répété: {{item}} </p>
   </div>

Comment utiliser un ngFor pour parcourir des objets

Vous pouvez utiliser la directive ngFor pour parcourir les objets et accéder à leurs variables individuelles.

1. Créez une liste d'objets dans le fichier TypeScript. Dans ce cas, il y aura une liste de personnes avec leurs coordonnées :

   exporter classerExempleClassemet en oeuvreOnInit{
    personnes = []; 
   constructeur() {
   cette.personnes = [
    { prénom: 'John', nom de famille: 'Forgeron', Occupation: 'responsable des ressources humaines', startDate: nouvelle Date("2019-02-05") },
    { prénom: 'Marie', nom de famille: 'Johnson', Occupation: 'Officier technique', startDate: nouvelle Date("2016-01-07") },
    { prénom: 'William', nom de famille: 'Marron', Occupation: 'Responsable RH', startDate: nouvelle Date("2018-03-03") },
    ];
    }
   }

2. Dans le HTML, utilisez la boucle ngFor pour parcourir la liste des personnes. Chaque personne sera accessible en utilisant le la personne variable. Vous pouvez utiliser la variable person pour accéder aux attributs de chaque personne :

   <div *ngFor='laisser personne de personnes; soit i = indice'>
   <h2> {{person.firstName}} {{person.lastName}} </h2>
   <p> {{personne.occupation}} </p>
   <p> {{person.startDate}} </p>
   </div>

Comment utiliser un ngFor imbriqué pour afficher des objets à l'intérieur d'autres objets

Vous pouvez utiliser une boucle for imbriquée pour afficher des objets à l'intérieur d'autres objets.

1. Modifier la liste des personnes. Chaque personne aura une liste de contacts d'urgence. Enregistrez chaque contact d'urgence comme un objet séparé :

   cette.personnes = [
    {
    prénom: 'John',
    nom de famille: 'Forgeron',
    Contacts d'urgence: [
    { Nom: 'Amanda Smith', relation: 'Épouse', téléphoner: '0441239876' },
    { Nom: 'Barry Smith', relation: 'Fils', téléphoner: '0442239876'}
    ]
    },
    {
    prénom: 'Marie',
    nom de famille: 'Johnson',
    Contacts d'urgence: [
    { Nom: 'Marc Johnson', relation: 'Mari', téléphoner: '0443239876' }
    ]
    },
    ];

2. Dans le code HTML, créez une boucle imbriquée dans votre boucle d'origine pour parcourir chaque contact d'urgence et afficher leurs détails :

   <div *ngFor='laisser personne de personnes; soit i = indice'>
   <h2> {{person.firstName}} {{person.lastName}} </h2>
   <div *ngFor='laisser le contact de person.emergencyContacts; soit j = indice'>
   <h5> Contacts d'urgence: </h5>
   <p> {{Nom du contact}} </p>
   <p> {{personne.relation}} </p>
   <p> {{person.phone}} </p>
   </div>
   <Br>
   </div>

Boucler en utilisant ngFor dans Angular

Vous pouvez utiliser la directive structurelle ngFor pour parcourir dynamiquement les éléments HTML de votre site Web. Cela vous permettra de répéter le même bloc pour un certain nombre d'objets, ou pour un nombre de fois spécifié.

Vous pouvez également l'utiliser pour faire d'autres astuces telles que sauter chaque nombre pair ou impair ou styliser le premier et le dernier élément. Vous pouvez également l'utiliser pour restituer dynamiquement de nombreux objets dans d'autres objets.

Il existe d'autres directives angulaires que vous pouvez utiliser pour rendre votre site Web plus dynamique. Ceux-ci incluent ngIf, ngSwitch, ngStyle, ngClass et ngModel.