Question

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

Answer 1

我会使用这种语法将索引值设置为HTML元素的属性：

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

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

最新角度2发布的更新 您必须使用let来声明值，而不是#。

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

Answer 2

在Angular 5/6/7中：

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

（见Local Variables）

Answer 3

仅仅是对此的更新，蒂埃里的答案仍然是正确的，但Angular2的更新有关：

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

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

EDIT / UPDATE：

*ngFor应该放在你想要预告的元素上，所以对于这个例子应该是：

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

编辑/更新

Angular 5

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

Answer 4

我认为它之前已经得到了解答，但如果您填写无序列表只是一个更正，*ngFor将出现在您要重复的元素中。所以应该是<li>。此外，Angular2现在使用let来声明变量。

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

Answer 5

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

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

Answer 6

添加此最新答案以说明大多数人都会遇到的情况。如果您只需要查看列表中的最后一项，请使用last关键字：

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

这会将除法器组件添加到除最后一项以外的所有项目中。

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

$隐式：T ：可迭代项中各个项目的值（ngForOf）。
ngForOf：NgIterable ：可迭代表达式的值。当表达式比属性访问更复杂时，例如在使用异步管道（userStreams | async）时，该功能很有用。
索引：数字：当前项目在可迭代项中的索引。
count：数字：可迭代项的长度。
count：数字：可迭代项的长度。
第一位：布尔值：当该项为可迭代项的第一项时为true。
最后一个：布尔值：当该项是可迭代项中的最后一项时为true。
偶数：布尔值：当该项在可迭代项中具有偶数索引时为true。
奇数：布尔值：当该项在可迭代项中具有奇数索引时为true。

Answer 7

使用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>

Answer 8

您可以直接使用 [attr.data-index] 将索引保存到Angular 2及更高版本中可用的data-index属性。

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

Answer 9

尝试一下

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

ngFor with index作为属性中的值

9 个答案: