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 atributo data-index . 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 data-index ?
Usaría esta sintaxis para establecer el valor del índice en un atributo del elemento HTML:
Tienes que 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> <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 .
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
Ejemplos de pruebas unitarias
Otro ejemplo interesante
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 ser let i = index
EDITAR/ACTUALIZAR:
El *ngFor debe estar en el elemento que desea foreach, 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>EDITAR/ACTUALIZAR
Angular 7/8
<ul *ngFor="let item of items; index as i"> <li [attr.data-index]="i">{{item}}</li> </ul>