web-dev-qa-db-fra.com

ngFor avec index comme valeur dans attribut

J'ai une simple boucle ngFor qui garde également une trace du index actuel. Je veux stocker cette valeur index dans un attribut pour que je puisse l’imprimer. Mais je n'arrive pas à comprendre comment cela fonctionne.

J'ai essentiellement ceci:

<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 aucune d'entre elles n'a fonctionné.

J'ai une démo ici: http://plnkr.co/edit/EXpOKAEIFlI9QwuRcZqp?p=preview

Comment enregistrer la valeur index dans l'attribut data-index?

angularngfor
432
Vivendi

J'utiliserais cette syntaxe pour définir la valeur d'index dans un attribut de l'élément HTML:

Angulaire> = 2

Vous devez utiliser let pour déclarer la valeur plutôt que #.

<ul>
    <li *ngFor="let item of items; let i = index" [attr.data-index]="i">
        {{item}}
    </li>
</ul>

Angulaire = 1

<ul>
    <li *ngFor="#item of items; #i = index" [attr.data-index]="i">
        {{item}}
    </li>
</ul>

Voici le fichier mis à jour: http://plnkr.co/edit/LiCeyKGUapS5JKkRWnUJ?p=preview .

750
Thierry Templier

Dans Angular 5/6/7/8:

<ul>
  <li *ngFor="let item of items; index as i">
    {{i+1}} {{item}}
  </li>
</ul>

Dans les anciennes versions

<ul *ngFor="let item of items; index as i">
  <li>{{i+1}} {{item}}</li>
</ul>

Angular.io ▸ API ▸ NgForOf

Exemples de tests unitaires

Un autre exemple intéressant

229
Leo

Juste une mise à jour, la réponse de Thierry est toujours correcte, mais Angular2 a fait l’objet d’une mise à jour concernant:

<ul *ngFor="let item of items; let i = index" [attr.data-index]="i">
  <li>{{item}}</li>
</ul>

Le #i = index devrait maintenant être let i = index

EDIT/UPDATE:

Le *ngFor devrait figurer sur l'élément que vous souhaitez éviter, ainsi pour cet exemple, il devrait être:

<ul>
  <li *ngFor="let item of items; let i = index" [attr.data-index]="i">{{item}}</li>
</ul>

EDIT/UPDATE

Angulaire 5

<ul>
  <li *ngFor="let item of items; index as i" [attr.data-index]="i">{{item}}</li>
</ul>

EDIIT/UPDATE

Angulaire 7/8

<ul *ngFor="let item of items; index as i">
  <li [attr.data-index]="i">{{item}}</li>
</ul>
92
Wesley Coetzee

Je pense qu'il a déjà été répondu auparavant, mais juste une correction si vous remplissez une liste non ordonnée, le *ngFor viendra dans l'élément que vous voulez répéter. Donc, il devrait être insdide <li>. De plus, Angular2 utilise maintenant let pour déclarer une variable.

<ul>
    <li *ngFor="let item of items; let i = index" [attr.data-index]="i">     
               {{item}}
    </li>
</ul>
48
monica

Les autres réponses sont correctes mais vous pouvez omettre complètement le [attr.data-index] et simplement utiliser

<ul>
    <li *ngFor="let item of items; let i = index">{{i + 1}}</li>
</ul
19
Alf Moh

Essaye ça

<div *ngFor="let piece of allPieces; let i=index">
{{i}} // this will give index
</div>
1
Chirag