我有一个简单的ngFor循环，它还可以跟踪当前索引。我想把索引值存储在一个属性中，这样我就可以打印它了。
我基本上有这个：
<ul *ngFor="#item of items; #i = index" data-index="#i">
<li>{{item}}</li>
</ul>
我想将#I的值存储在属性数据索引中。我尝试了几种方法，但都没有奏效。
我这里有一个演示：http://plnkr.co/edit/EXpOKAEIFlI9QwuRcZqp?p=preview
如何将索引值存储在数据索引属性中？
当前回答
只是对此的更新，Thierry的回答仍然正确，但Angular2在以下方面进行了更新：
<ul *ngFor="let item of items; let i = index" [attr.data-index]="i">
<li>{{item}}</li>
</ul>
#i=索引现在应该让i=索引
编辑/更新：
*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>
edit/更新
角度7/8
<ul *ngFor="let item of items; index as i">
<li [attr.data-index]="i">{{item}}</li>
</ul>
其他回答
我将使用此语法将索引值设置为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>
以下是更新的plunker：http://plnkr.co/edit/LiCeyKGUapS5JKkRWnUJ?p=preview.
试试这个
<div *ngFor="let piece of allPieces; let i=index">
{{i}} // this will give index
</div>
在角度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; let i = index">
<li>{{i+1}} {{item}}</li>
</ul>
角度.io▸ 美国石油学会▸ NgForOf公司
描述局部变量
单元测试示例
ng_for_spec.ts格式
另一个有趣的例子
分组
只是对此的更新，Thierry的回答仍然正确，但Angular2在以下方面进行了更新：
<ul *ngFor="let item of items; let i = index" [attr.data-index]="i">
<li>{{item}}</li>
</ul>
#i=索引现在应该让i=索引
编辑/更新：
*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>
edit/更新
角度7/8
<ul *ngFor="let item of items; index as i">
<li [attr.data-index]="i">{{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>
