2015-03-29 26 views
20

Jak na razie istnieje sposób na uzyskanie aktualnego indeksu iteracji w dyrektywie for..of w Angular 2? W innych słowach, odpowiednik $index w angularjs v1 ...Zdobądź indeks dla ... dyrektywy w Angular 2

przykładu kodu:

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

(oczywiście ten kod nie działa, to nie dostarcza aktualny indeks)

Odpowiedz

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

Ale trzeba użyć bardzo najnowszą wersję QuickStart

BTW - powyżej jest równoznaczne z następującym cukru składni

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

Właściwie, to działa w QuickStart tak długo, jak masz zaktualizowany do najnowszej wersji szybkiego startu – unobf

+0

Dzięki. Pierwsza wersja zwraca błąd (nie zaktualizowałem quickstart, nie chcę na razie wpływać na resztę mojego kodu), ale druga składnia działa dobrze. Dzięki ! – romaintaz

13

Składnia został zaktualizowany i jest teraz (od Angular2.beta13, kwiecień 2016):

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

Na przykład:

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

aktualizację, należy użyć niech nie #

3

Zastosowanie * ngFor, niech:

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

Składnik:

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