ngPer con indice come valore nell'attributo


571

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?

Risposte:


1003

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 .


4
In effetti, attr.è una sintassi per dire ad Angular2 di impostare il valore dell'espressione sul nome dell'attributo. Non è solo come valutare JSON, immagino ;-) Vedi questo link: angular.io/docs/ts/latest/guide/template-syntax.html
Thierry Templier,

1
Grazie, questo è il trucco. Inoltre, intendevo mettere ngForil liinvece del ul.
Vivendi,

1
Ho eseguito il rollback della modifica recente per avere sia la risposta originale sia il nuovo valore di codice aggiornato. Stavo cercando alcune cose beta iniziali e ho visto che questa risposta è stata modificata, quindi non si applicava più alla versione beta di
angular

4
AGGIORNAMENTO: 08/2017 <div * ngFor = "let hero of heroes; let i = index; trackBy: trackById">
Maxi

4
dal 17 ottobre 2018 Angular 6 utilizza * ngFor = "lascia l'oggetto degli articoli; indicizza come i" Vedi la risposta di Leo di seguito.
Gel

318

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

Esempi di unit test

Un altro esempio interessante


11
questo è! Funziona dal 17 ottobre 2018. Grazie. (perché continuano a cambiare sintassi, così fastidioso?
Gel

2
questa è una risposta migliore e semplice della prima.
Kenry Sanchez,

2
index as ifunziona benissimo, grazie. Ma non si *ngForintende ripetere l'elemento (ad es. <li>In questo caso)? Il codice che hai suggerito crea più <ul>file rispetto a più <li>s.
Liran H

index as iè più elegante dilet i = index
Dabbbb.

108

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>

3
E #itemdovrebbe essere let item;-)
Günter Zöchbauer,

52

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>

Penso che sia meglio specificare la direttiva * ngFor nel tag ul <ul * ngFor = "let item of items; index as i" [attr.data-index] = "i"> <li> {{item} } </li> </ul>
bajran

1
Se si specifica ngFor nel tag ul, l'entità che verrà ripetuta sarà ul, ma qui non si desidera ripetere l'ul, si desidera semplicemente scorrere gli elementi dell'elenco, ad esempio li.
Monica,

21

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

2

È 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>

1

Prova questo

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

0

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>
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.