ngFor，其中索引作为属性中的值

我有一个简单的ngFor循环，它也跟踪当前index 。我想将该index值存储在属性中，以便可以打印它。但是我不知道这是如何工作的。

我基本上有这个：

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

我想将#i的值存储在属性data-index 。我尝试了几种方法，但没有一个起作用。

如何将index值data-index属性中？

答案

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

您必须使用let声明值，而不是# 。

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

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

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

在 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

单元测试示例

另一个有趣的例子

只是对此的更新，Thierry 的回答仍然是正确的，但是在以下方面对 Angular2 进行了更新：

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

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

编辑 / 更新：

*ngFor应该位于您要传递的元素上，因此对于此示例，它应为：

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

编辑 / 更新

角度 5

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

EDIIT / 更新

角 7/8

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