ngFor with index作为属性中的值

我有一个简单的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

如何将index值存储在data-index属性中？

---

#1楼

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

角度> = 2

你必须使用let来声明值而不是# 。

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

角度= 1

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

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

---

#2楼

仅仅是对此的更新，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应该在你想要的元素上，所以对于这个例子它应该是：

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

编辑/ UPDATE

Angular 5

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

EDIIT / UPDATE

Angular 7/8

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

---

#3楼

我认为它之前已经得到了回答，但如果你填充无序列表只是一个修正， *ngFor会出现在你要重复的元素中。 所以它应该是insdide <li> 。 此外，Angular2现在使用let来声明变量。

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

---

#4楼

其他答案是正确的，但您可以完全省略[attr.data-index]并使用

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

---

#5楼

在Angular 5/6/7/8中：

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

---

在旧版本中

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

---

Angular.io▸API▸NgForOf

• 描述
• 局部变量

单元测试示例

• ng_for_spec.ts

另一个有趣的例子

• 分组

---

#6楼

试试这个

<div *ngFor="let piece of allPieces; let i=index">
{{i}} // this will give index
</div>