ngFor avec index comme valeur dans l'attribut

J'ai une ngForboucle simple qui garde également la trace du courant index. Je souhaite stocker cette indexvaleur dans un attribut afin de pouvoir l'imprimer. Mais je ne peux 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 #idans l'attribut data-index. J'ai essayé plusieurs méthodes mais aucune n'a fonctionné.

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

Comment puis-je stocker la indexvaleur dans l' data-indexattribut?

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

Angulaire> = 2

Vous devez utiliser letpour 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 plunkr mis à jour: http://plnkr.co/edit/LiCeyKGUapS5JKkRWnUJ?p=preview .

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

• La description
• Variables locales

Exemples de tests unitaires

• ng_for_spec.ts

Un autre exemple intéressant

• Regroupement

Juste une mise à jour, la réponse de Thierry est toujours correcte, mais il y a eu une mise à jour d'Angular2 en ce qui concerne:

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

Le #i = indexdevrait maintenant êtrelet i = index

MODIFIER / METTRE À JOUR:

Le *ngFordevrait être sur l'élément que vous souhaitez foreach, donc pour cet exemple, il devrait être:

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

MODIFIER / METTRE À JOUR

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>

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

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

Les autres réponses sont correctes mais vous pouvez [attr.data-index]tout à fait omettre et simplement utiliser

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

Vous pouvez utiliser [attr.data-index] directement pour enregistrer l'index dans l'attribut data-index qui est disponible dans les versions Angular 2 et supérieures.

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

Essaye ça

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

avec pagination laravel

file.component.ts file

    datasource: any = {
        data: []
    }

    loadData() {
        this.service.find(this.params).subscribe((res: any) => {
            this.datasource = res;
        });
    }

html file

   <tr *ngFor="let item of datasource.data; let i = index">
       <th>{{ datasource.from + i }}</th>
   </tr>