2015-03-29 17 views
20

Ab sofort gibt es eine Möglichkeit, den aktuellen Index des iterable in einer for..of Direktive in Angular 2 zu erhalten? In anderen Worten, das Äquivalent von $index in Angularjs v1 ...Index in einer for ... der Direktive in Angular erhalten 2

Beispiel Code:

<ul *for="#task of allTasks"> 
    <li>{{ $index}} - {{ task.label }}</li> 
</ul> 

(natürlich dieser Code nicht funktioniert, funktioniert es nicht den aktuellen Index liefern)

Antwort

41
<ul> 
    <template ngFor let-task [ngForOf]="allTasks" let-i="index"> 
     <li>{{ i }} - {{ task.label }}</li> 
    </template> 
</ul> 

Aber Sie haben die sehr neueste Version des Quickstart

BTW verwenden - die oben ist das Äquivalent der Zucker folgende Syntax

<li *ngFor="let task of allTasks; let i=index">{{ i }} - {{ task.label }}</li> 
+0

Eigentlich ist dies funktioniert in der Schnellstart, solange Sie auf die neueste Version des Quickstart – unobf

+0

Dank aktualisiert haben. Die erste Version gibt einen Fehler zurück (Ich habe den Schnellstart nicht aktualisiert, ich möchte den Rest meines Codes jetzt nicht beeinflussen), aber die zweite Syntax funktioniert gut. Vielen Dank ! – romaintaz

13

Die Syntax wurde aktualisiert und ist jetzt (Stand Angular2.beta13, im April 2016):

<li *ngFor="let item of items; let i = index"></li> 

Zum Beispiel:

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

Update, lassen Sie verwenden, nicht #

3

Verwenden * ngFor lassen:

<li *ngFor="let menu of tempMenuModel.MenuItems.Items;let i=index" [ngClass]="{'active' : clickedItem == i}" (click)="SelectMenu(menu,i)"> 
     <span>{{menu.Header ==null?menu.Name:menu.Header}}</span> 
</li> 

Komponente:

SelectMenu(menu, $index) {  
    this.clickedItem = $index;   
}