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属性中？

我将使用以下语法将索引值设置为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>

这是更新的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

• 描述
• 局部变量

单元测试示例

• ng_for_spec.ts

另一个有趣的例子

• 分组

只是对此的更新，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应该是你想要的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>

EDIIT /更新

角7/8

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

我认为它已经被回答过了，但是如果您要填充一个无序列表，这只是一个更正，*ngFor它将出现在您要重复的元素中。所以它应该是明智的<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

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

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

尝试这个

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

与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>