ngFor在属性中以索引为值

我有一个简单的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属性中？

1432149 次浏览
小开
最佳答案

我将使用此语法将索引值设置为超文本标记语言元素的属性：

Angular>=2

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

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

Angular=1

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

以下是更新的Pumkr：http://plnkr.co/edit/LiCeyKGUapS5JKkRWnUJ?p=preview。

小开

只是对此进行了更新，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>

编辑/更新

角度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
小开

在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; let i = index"><li>\{\{i+1}} \{\{item}}</li></ul>

Angular.ioAPI-NgForOf

单元测试示例

另一个有趣的例子

小开

试试这个

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

您可以直接使用[attr.data索引]将索引保存到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>
小开

添加这个迟到的答案以显示大多数人会遇到的案例。如果您只需要查看列表中的最后一项，请使用last关键字：

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

这将把除法器组件添加到除最后一个之外的每个项目中。

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

  • $隐式：T：可迭代对象中各个项目的值（ngForOf）.
  • ngForOf：可转换的：可迭代表达式的值。当表达式比属性访问更复杂时很有用，例如在使用异步管道（userStreams|async）时。
  • 索引：数字：可迭代对象中当前项的索引。
  • 计数：可迭代对象的长度。
  • 第一个：boolean：当项目是可迭代对象中的第一个项目时为真。
  • 最后一个： boolean：当项目是可迭代对象中的最后一项时为true。
  • 甚至：boolean：当项目在可迭代对象中具有偶数索引时为true。
  • 奇数：布尔：当项目在可迭代对象中具有奇数索引时为真。

提交答案