ngFor con índice como valor en atributo


571

Tengo un ngForbucle simple que también realiza un seguimiento de la corriente index. Quiero almacenar ese indexvalor 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 #ien 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 indexvalor en el data-indexatributo?

Respuestas:


1003

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

Angular> = 2

Tienes que usar letpara 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 .


44
De hecho, attr.es una sintaxis para indicarle a Angular2 que establezca el valor de la expresión en el nombre del atributo. Supongo que no es solo como evaluar JSON ;-) Vea este enlace: angular.io/docs/ts/latest/guide/template-syntax.html
Thierry Templier

1
Gracias, eso hace el truco. Además, quise poner el ngForen lilugar del ul.
Vivendi

1
Revertí la edición reciente para tener tanto la respuesta original como el nuevo valor de código actualizado. Estaba buscando algunas cosas beta tempranas y vi que esta respuesta se modificó, por lo que ya no se aplicaba a la versión beta de angular 2.
ps2goat

44
ACTUALIZACIÓN: 08/2017 <div * ngFor = "let hero of heroes; let i = index; trackBy: trackById">
Maxi

44
a partir del 17 de octubre de 2018, Angular 6 está utilizando * ngFor = "let item of items; index as i" Consulte la respuesta de Leo a continuación.
Gel

318

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


11
¡eso es todo! Trabajando a partir del 17 de octubre de 2018. Gracias. (¿por qué siguen cambiando la sintaxis, tan molesto?
Gel

2
Esta es una respuesta mejor y más simple que la primera.
Kenry Sanchez

2
index as ifunciona muy bien, gracias Pero, ¿no se *ngForpretende que se repita el elemento (por ejemplo, <li>en este caso)? El código que sugirió crea múltiples <ul>s rathers que múltiples <li>s.
Liran H

index as ies más elegante quelet i = index
Dabbbb.

108

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 = indexahora debería serlet i = index

EDITAR / ACTUALIZAR:

El *ngFordebe haber en el elemento que está queriendo foreach, por lo que para este ejemplo que debe 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>

3
Y #itemdebería ser let item;-)
Günter Zöchbauer

52

Creo que ya se ha respondido antes, pero solo una corrección si está completando una lista desordenada, *ngForaparecerá en el elemento que desea repetir. Por lo tanto, debe ser interior <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>

Creo que es una buena práctica especificar la directiva * ngFor en la etiqueta ul <ul * ngFor = "let item of items; index as i" [attr.data-index] = "i"> <li> {{item} } </li> </ul>
bajran

1
Si especifica ngFor en la etiqueta ul, la entidad que se repetirá será ul, pero aquí no desea repetir ul, solo desea iterar en los elementos de la lista, es decir, li.
monica

21

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

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

2

Puede usar [attr.data-index] directamente para guardar el índice en el atributo de índice de datos que está disponible en las versiones angulares 2 y superiores.

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

1

Prueba esto

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

0

con paginación 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>
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.