Получить индекс в A для...директивы в Angular 2

Question

Получить индекс в A для...директивы в Angular 2

На данный момент, есть ли способ получить текущий индекс итерационного в Директиве for..of в Angular 2? Другими словами, эквивалент $index в угловой.js v1...

Пример кода:

<ul *for="#task of allTasks">

    <li>{{ $index}} - {{ task.label }}</li>

</ul>

(Конечно, этот код не работает, он не предоставляет текущий индекс)

441 4

angular

4 ответов:

Comments

Ничего не найдено.

unobf · Accepted Answer · 2018-05-09 05:52:23

<ul>
    <template ngFor let-task [ngForOf]="allTasks" let-i="index">
        <li>{{ i }} - {{ task.label }}</li>
    </template>
</ul>
Но вы должны использовать самую последнюю версию quickstart

Кстати-вышеизложенное эквивалентно следующему синтаксису сахара
<li *ngFor="let task of allTasks; let i=index">{{ i }} - {{ task.label }}</li>

Julien · Accepted Answer · 2018-05-09 05:52:45

Синтаксис был обновлен и теперь (по состоянию на Angular2.beta13, апрель 2016):
<li *ngFor="let item of items; let i = index"></li>
Например:
<li *ngFor="let item of items; let i = index">
   item={{item}} index={{i}}
</li>

Sandip Patel · Accepted Answer · 2018-05-09 05:53:12

Используйте * ngFor, пусть:

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

Компонент:

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

robert king · Accepted Answer · 2018-05-09 05:53:23

Обновить, использовать let, а не #
<div *ngFor="let user of users; let i=index">
    {{i}}
</div>