Angular 将索引作为属性中的值的ngFor

我有一个简单的

ngFor

循环，它还跟踪当前的

索引。我想将该
索引
值存储在属性中，以便打印它。但我不知道这是怎么回事

我基本上有：

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

数据索引=“#i”>
{{item}}


我想将
#I
的值存储在属性
数据索引中。我试过几种方法，但都不管用

我这里有一个演示：

如何将
索引
值存储在
数据索引
属性中？
我将使用以下语法将索引值设置为HTML元素的属性：

角度>=2
您必须使用
let
来声明值，而不是



{{item}}



角度=1


{{item}}



这是更新后的plunkr:。
这只是一个更新，Thierry的答案仍然正确，但Angular2已经更新了以下内容：

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

编辑/更新

角度5

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


{{item}


电子数据交换/更新

角度7/8

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


{{{item}

我想它之前已经被回答过了，但是如果您正在填充一个无序列表，那么
*ngFor
将出现在您想要重复的元素中。所以它应该是insdide
。此外，Angular2现在使用let声明变量

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



{{item}}


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

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


{{i+1}
角度5/6/7/8：



{{i+1}}{{item}




在旧版本中


{{i+1}}{{item}



Angular.io▸ 美国石油学会▸ NgForOf





单元测试示例




另一个有趣的例子



试试这个

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


{{i}}//这将给出索引
您可以直接使用[attr.data index]将索引保存到数据索引属性，该属性在Angular版本2及更高版本中可用

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


{{item}}

带有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>

file.component.ts文件
数据源：任意={
数据：[]
}
loadData（）{
this.service.find（this.params）.subscribe（（res:any）=>{
this.datasource=res；
});
}
html文件
{{datasource.from+i}
添加这个迟来的答案，以展示大多数人都会遇到的情况。如果您只需要查看列表中的最后一项，请使用
last
关键字：

<div *ngFor="let item of devcaseFeedback.reviewItems; let last = last">
  <divider *ngIf="!last"></divider>
</div>



这会将分隔器组件添加到除最后一项之外的每个项目

由于下面的注释，我将添加导出值的其余部分，这些值可以别名为局部变量（如文档中所示）：


$implicit:T：iterable中单个项的值
（ngForOf）
ngForOf:NgIterable：iterable表达式的值。当表达式比属性访问更复杂时非常有用，例如当使用异步管道（userStreams | async）时
索引：编号：iterable中当前项的索引
count:number：iterable的长度
first:boolean：当项是iterable中的第一项时为True
last:boolean：当项是iterable中的最后一项时为True
偶数：布尔值：当项在iterable中具有偶数索引时为True
奇数：布尔值：当项在iterable中具有奇数索引时为True
事实上，
attr.
是告诉Angular2将表达式的值设置为属性名的语法。我想这不仅仅是评估JSON；-）请参阅此链接：谢谢，这就是诀窍。另外，我打算将
ngFor
放在
li
上，而不是
ul
。我回滚了最近的编辑，以便获得原始答案和新的更新代码值。我在搜索一些早期的测试版资料，发现这个答案被修改了，因此它不再适用于angular 2的测试版。更新：2018年10月17日起，2017年8月angular 6使用*ngFor=“让项目的项目；我的索引”见下面Leo的答案。并且
#item
应该是
让项目
-）我认为在ul标记中指定*ngFor指令是最佳实践，如果在ul标记中指定ngFor，然后将被重复的实体将是ul，但是这里你不想重复ul，你只想迭代列表元素，即li。就是这样！截至2018年10月17日工作。非常感谢。（为什么他们不停地修改语法，这么烦人？这是一个比第一个更好、更简单的答案。
index as i
效果很好，谢谢。但是
*ngFor
不是意味着要继续重复元素吗（例如，在本例中是
）？您建议的代码
<div *ngFor="let item of devcaseFeedback.reviewItems; let last = last">
  <divider *ngIf="!last"></divider>
</div>