27

到目前为止,有没有办法for..of在 Angular 2 的指令中获取可迭代的当前索引?换句话说,相当于$indexAngular.js v1...

代码示例:

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

(当然这段代码不起作用,它不提供当前索引)

4

4 回答 4

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

但是您必须使用最新版本的快速入门

顺便说一句 - 以上等同于以下语法糖

<li *ngFor="let task of allTasks; let i=index">{{ i }} - {{ task.label }}</li>
于 2015-03-29T23:54:51.540 回答
19

语法已经更新,现在是(截至 Angular2.beta13,2016 年 4 月):

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

例如:

<li *ngFor="let item of items; let i = index">
   item={{item}} index={{i}}
</li>
于 2016-04-05T21:27:00.013 回答
3

使用*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;        
}
于 2016-09-27T11:13:04.063 回答
1

更新,使用 let,而不是 #

<div *ngFor="let user of users; let i=index">
    {{i}}
</div>
于 2016-05-25T01:15:38.657 回答