ngPer con indice come valore nell'attributo

Ho un semplice ngForciclo che tiene traccia anche della corrente index. Voglio memorizzare quel indexvalore in un attributo in modo da poterlo stampare. Ma non riesco a capire come funziona.

Fondamentalmente ho questo:

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

Voglio memorizzare il valore di #inell'attributo data-index. Ho provato diversi metodi ma nessuno ha funzionato.

Ho una demo qui: http://plnkr.co/edit/EXpOKAEIFlI9QwuRcZqp?p=preview

Come posso memorizzare il indexvalore data-indexnell'attributo?

Vorrei usare questa sintassi per impostare il valore dell'indice in un attributo dell'elemento HTML:

Angolare> = 2

Devi usare letper dichiarare il valore piuttosto che #.

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

Angolare = 1

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

Ecco il plunkr aggiornato: http://plnkr.co/edit/LiCeyKGUapS5JKkRWnUJ?p=preview .

In angolare 5/5/7/8:

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

Nelle versioni precedenti

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

Angular.io ▸ API ▸ NgForOf

• Descrizione
• Variabili locali

Esempi di unit test

• ng_for_spec.ts

Un altro esempio interessante

• Raggruppamento

Solo un aggiornamento a questo, la risposta di Thierry è ancora corretta, ma c'è stato un aggiornamento di Angular2 per quanto riguarda:

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

Il #i = indexpunto dovrebbe esserelet i = index

EDIT / UPDATE:

La *ngFordovrebbe essere sull'elemento hai intenzione di foreach, quindi per questo esempio dovrebbe essere:

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

EDIT / UPDATE

Angolare 5

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

EDIIT / AGGIORNAMENTO

Angolare 7/8

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

Penso che abbia già ricevuto una risposta prima, ma solo una correzione se si sta popolando un elenco non ordinato, *ngForarriverà nell'elemento che si desidera ripetere. Quindi dovrebbe essere strano <li>. Inoltre, Angular2 ora utilizza let per dichiarare una variabile.

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

Le altre risposte sono corrette ma è possibile omettere del [attr.data-index]tutto e solo usare

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

È possibile utilizzare [attr.data-index] direttamente per salvare l'indice nell'attributo data-index disponibile nelle versioni angolari 2 e successive.

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

Prova questo

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

con impaginazione di 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>