Angular - 2.28 Obtenir l'index lors de l'utilisation de ngFor

Dans la dernière vidéo, nous avons créé une solution avec notre log où nous pouvions ajouter des éléments qui reçoivent un numéro croissant. Ce numéro détermine ensuite si nous avons une couleur de fond bleue ou une classe CSS white text.

Dans le devoir, j'ai proposé deux options pour remplacer l'utilisation d'un numéro croissant dans notre log. La première option serait d'utiliser un contenu différent tel qu'un horodatage ou n'importe quel autre texte. La seconde option serait d'extraire l'index de ngFor pour remplacer la vérification actuelle basée sur le numéro croissant.

Afin d'implémenter la première option, j'ai modifié mon fichier app component.ts en utilisant l'horodatage obtenu avec "new date". "Date" est un objet intégré en JavaScript et ne nécessite donc pas d'importation. Maintenant, nous pouvons pousser de nouveaux horodatages sur notre tableau en exécutant "ng serve" et en cliquant simplement sur le bouton.

Cependant, tout est actuellement en bleu car notre vérification renvoie toujours "true" étant donné que la chaîne est considérée comme supérieure à 5. Pour résoudre cela, nous pouvons également ajouter quelque chose à "ngFor". En séparant par un point-virgule, nous pouvons extraire des informations supplémentaires telles que l'index actuel ou l'index de l'itération actuelle. Avec "let", nous pouvons le lier à n'importe quel nom de variable de notre choix, comme "i" ou "index". En utilisant "= index", nous pouvons accéder à l'index de l'itération actuelle.

Avec cette information, nous pouvons mettre à jour notre solution en remplaçant la vérification actuelle basée sur le numéro croissant par une vérification basée sur l'index extrait de ngFor. Cela nous permet de fonctionner avec n'importe quel contenu et pas seulement avec des nombres croissants.

En résumé, nous avons maintenant des connaissances solides sur les bases de la création d'une solution et nous pouvons les utiliser pour mettre en place notre projet de cours dans la prochaine section avant de plonger plus profondément dans les composants et la liaison de données.