ngFor con índice como valor en atributo

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?

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 .

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

• Descripción
• Variables locales

Ejemplos de pruebas unitarias

• ng_for_spec.ts

Otro ejemplo interesante

• Agrupamiento

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>

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>

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

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>

Prueba esto

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

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>