我有一个简单的ngFor循环，它也跟踪当前的index. 我想将该index值存储在一个属性中，以便我可以打印它。但我无法弄清楚这是如何工作的。
我基本上有这个：
<ul *ngFor="#item of items; #i = index" data-index="#i">
<li>{{item}}</li>
</ul>
我想将 的值存储#i在属性中data-index。我尝试了几种方法，但都没有奏效。
我在这里有一个演示：http: //plnkr.co/edit/EXpOKAEIFlI9QwuRcZqp ?p=preview
如何将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
单元测试示例
另一个有趣的例子
只是对此的更新，蒂埃里的回答仍然是正确的，但是 Angular2 已经更新了关于：
<ul *ngFor="let item of items; let i = index" [attr.data-index]="i">
<li>{{item}}</li>
</ul>
现在#i = index应该是let i = index
编辑/更新：
*ngFor应该在你想要 foreach 的元素上，所以对于这个例子，它应该是：
<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>
编辑/更新
角度 7/8
<ul *ngFor="let item of items; index as i">
<li [attr.data-index]="i">{{item}}</li>
</ul>
我认为它之前已经得到了回答，但如果你正在填充一个无序列表，这只是一个更正，*ngFor它将出现在你想要重复的元素中。所以它应该是 insdide <li>。此外，Angular2 现在使用 let 来声明一个变量。
<ul>
<li *ngFor="let item of items; let i = index" [attr.data-index]="i">
{{item}}
</li>
</ul>
其他答案是正确的，但您可以完全省略[attr.data-index]并只使用
<ul>
<li *ngFor="let item of items; let i = index">{{i + 1}}</li>
</ul
添加这个较晚的答案以显示大多数人会遇到的案例。如果您只需要查看列表中的最后一项是什么，请使用last关键字：
<div *ngFor="let item of devcaseFeedback.reviewItems; let last = last">
<divider *ngIf="!last"></divider>
</div>
这会将分隔符组件添加到除最后一项之外的每个项目。
ngFor由于下面的评论，我将添加可以别名为局部变量的其余导出值（如文档中所示）：
您可以直接使用[attr.data-index]将索引保存到 Angular 2 及更高版本中可用的 data-index 属性。
<ul*ngFor="let item of items; let i = index" [attr.data-index]="i">
<li>{{item}}</li>
</ul>
使用 laravel 分页
file.component.ts file
datasource: any = {
data: []
}
loadData() {
this.service.find(this.params).subscribe((res: any) => {
this.datasource = res;
});
}
html file
<tr *ngFor="let item of datasource.data; let i = index">
<th>{{ datasource.from + i }}</th>
</tr>
尝试这个
<div *ngFor="let piece of allPieces; let i=index">
{{i}} // this will give index
</div>