ngFor avec l'indice de valeur dans l'attribut
J'ai un simple ngFor
boucle qui conserve également la trace de l'actuel index
. Je veux stocker que index
valeur dans un attribut afin que je puisse l'imprimer. Mais je ne peux pas comprendre comment cela fonctionne.
J'ai pratiquement cette:
<ul *ngFor="#item of items; #i = index" data-index="#i">
<li>{{item}}</li>
</ul>
Je veux stocker la valeur de #i
dans l'attribut data-index
. J'ai essayé plusieurs méthodes, mais aucun d'entre eux travaillaient.
J'ai un démo ici: http://plnkr.co/edit/EXpOKAEIFlI9QwuRcZqp?p=preview
Comment puis-je stocker les index
valeur dans la data-index
attribut?
- Supprimer la modifier. Je pensais que j'étais en train d'éditer un de mes questions. Il a été une erreur
Vous devez vous connecter pour publier un commentaire.
Je voudrais utiliser cette syntaxe pour définir l'indice de valeur dans un attribut de l'élément HTML:
Angulaire >= 2
Vous devez utiliser
let
de déclarer la valeur plutôt que de#
.Angulaire = 1
Voici la mise à jour plunkr: http://plnkr.co/edit/LiCeyKGUapS5JKkRWnUJ?p=preview.
[attr['data-index']]=i
ne serait pas de travail, où qu'elle évaluer comme mêmeattr.
est une syntaxe de dire Angular2 pour définir la valeur de l'expression pour le nom de l'attribut. Ce n'est pas seulement, comme l'évaluation de JSON, je suppose 😉 Voir ce lien: angular.io/docs/ts/latest/guide/template-syntax.htmlngFor
sur leli
au lieu de laul
.Angulaire 5/6/7/8:
Dans les anciennes versions
Angulaire.io ▸ API ▸ NgForOf
Unité de test exemples
Un autre exemple intéressant
index as i
fonctionne très bien, merci. Mais n'est-ce pas le*ngFor
faite pour aller sur l'élément à être répétée (par exemple, la<li>
dans ce cas)? Le code que vous avez suggéré crée plusieurs<ul>
s rathers que plusieurs<li>
s.Juste une mise à jour de ce, Thierry de réponse est toujours correct, mais il y a eu une mise à jour de Angular2 en ce qui concerne:
La
#i = index
devrait maintenant êtrelet i = index
MODIFIER/MISE À JOUR:
La
*ngFor
devrait être sur l'élément que vous êtes désireux de foreach, donc, pour cet exemple, il devrait être:MODIFIER/METTRE À JOUR
Angulaire 5
EDIIT/MISE À JOUR
Angulaire 7/8
#item
devrait êtrelet item
😉Je pense que c'est déjà répondu avant, mais juste une correction si vous êtes le remplissage d'une liste non ordonnée, la
*ngFor
viendra dans l'élément que vous souhaitez répéter. Il devrait donc être insdide<li>
. Aussi, Angular2 utilise maintenant laisser pour déclarer une variable.Les autres réponses sont correctes, mais vous pouvez omettre le
[attr.data-index]
complètement et il suffit d'utiliserEssayer cette