ng作为属性中的索引值

我有一个简单的ngFor循环，它也跟踪当前的index 。 我想在属性中打印该index值。 但我不明白这应该如何工作。

我基本上有这个：

  <ul *ngFor="#item of items; #i = index" data-index="#i"> <li>{{item}}</li> </ul> 

我想在属性data-index打印#i的值。 我尝试了几种方法，但都没有工作。

我在这里有一个演示： http : //plnkr.co/edit/EXpOKAEIFlI9QwuRcZqp?p=preview

如何在data-index属性中打印index值？

Answer 1

我将使用此语法将索引值设置为HTML元素的属性：

 <ul *ngFor="#item of items; #i = index" [attr.data-index]="i"> <li>{{item}}</li> </ul> 

一个小评论。 也许你可以在li元素上使用ngFor而不是ul元素

这是更新的plunkr： http ://plnkr.co/edit/LiCeyKGUapS5JKkRWnUJ?p=preview。

更新最近的angular度2版本您必须使用let来声明值而不是# 。

 <ul *ngFor="let item of items; let i = index" [attr.data-index]="i"> <li>{{item}}</li> </ul> 

Answer 2

我认为它已经被回答了，但是如果你正在填充一个无序的列表，那么*ngFor就会出现在你想要重复的元素中。 所以它应该是内部的<li> 。 另外，Angular2现在使用let来声明一个variables。

 <ul> <li *ngFor="let item of items; let i = index" [attr.data-index]="i"> {{item}} </li> </ul> 

Answer 3

只是对这个更新，Thierry的答案仍然是正确的，但是Angular2已经有了一个更新：

 <ul *ngFor="let item of items; let i = index" [attr.data-index]="i"> <li>{{item}}</li> </ul> 

#i = index现在应该是let i = index

编辑/ UPDATE：

*ngFor应该在你想要foreach的元素上，所以对于这个例子应该是：

 <ul> <li *ngFor="let item of items; let i = index" [attr.data-index]="i">{{item}}</li> </ul> 

Answer 4

其他的答案是正确的，但你可以一起省略[attr.data-index] ，然后使用

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