example - ngfor index angular 5

ngFor con índice como valor en atributo

Question

Tengo un bucle ngFor simple que también realiza un seguimiento del index actual. Quiero almacenar ese valor de index en un atributo para poder imprimirlo. Pero no puedo entender cómo funciona esto.

Básicamente tengo esto:

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

Quiero almacenar el valor de #i en el data-index del atributo. Probé varios métodos pero ninguno funcionó.

Tengo una demostración aquí: http://plnkr.co/edit/EXpOKAEIFlI9QwuRcZqp?p=preview

¿Cómo puedo almacenar el valor del index en el atributo de data-index ?

Answer 1

Creo que ya se ha respondido antes, pero solo una corrección si está completando una lista desordenada, el *ngFor vendrá en el elemento que desea repetir. Por lo tanto, debe estar dentro <li> . Además, Angular2 ahora usa let para declarar una variable.

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

Answer 2

En Angular 5/6/7/8:

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

En versiones anteriores

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

Angular.io ▸ API ▸ NgForOf

• Description
• Variables locales

Ejemplos de pruebas unitarias

• ng_for_spec.ts

Otro ejemplo interesante

• Grouping

Answer 3

Las otras respuestas son correctas, pero puede omitir el [attr.data-index] completo y simplemente usar

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

Answer 4

Prueba esto

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

Answer 5

Solo una actualización de esto, la respuesta de Thierry sigue siendo correcta, pero ha habido una actualización de Angular2 con respecto a:

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

El #i = index ahora debería let i = index

EDITAR / ACTUALIZAR:

*ngFor debe estar en el elemento que desea predecir, por lo que para este ejemplo debería ser:

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

EDITAR / ACTUALIZAR

Angular 5

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

EDICIÓN / ACTUALIZACIÓN

Angular 7/8

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

Answer 6

Usaría esta sintaxis para establecer el valor del índice en un atributo del elemento HTML:

Angular> = 2

Debe usar let para declarar el valor en lugar de # .

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

Angular = 1

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

Aquí está el plunkr actualizado: http://plnkr.co/edit/LiCeyKGUapS5JKkRWnUJ?p=preview .