ngFor 以索引作为属性中的值

Question

我有一个简单的 ngFor 循环，它还跟踪当前的 index。我想将该 index 值存储在一个属性中，以便打印它。但是我不知道这是怎么回事。

我基本上有这个：

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

我想将 #i 的值存储在属性 data-index 中。我尝试了几种方法，但其中 none 有效。

我这里有一个演示：http://plnkr.co/edit/EXpOKAEIFlI9QwuRcZqp?p=preview

如何在 data-index 属性中存储 index 值？

Answer 1

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

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>

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

Answer 2

只是对此进行了更新，Thierry 的回答仍然是正确的，但是 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 应该在你想要 foreach 的元素上，所以对于这个例子它应该是：

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

EDIT/UPDATE

Angular 5

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

EDIIT/UPDATE

Angular 7/8

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

Answer 3

我认为之前已经回答过，但如果您正在填充无序列表，则只是更正，*ngFor 将出现在您要重复的元素中。所以应该在<li>里面。此外，Angular2 现在使用 let 来声明变量。

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

Answer 4

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

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

Answer 5

在 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

另一个有趣的例子

Grouping

Answer 6

试试这个

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

Answer 7

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

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

Answer 8

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

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

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

这会将分隔线组件添加到除最后一项之外的所有项目。

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

$implicit: T: iterable中单个项的值 (ngForOf).
ngForOf: NgIterable：可迭代表达式的值。当表达式比属性访问更复杂时很有用，例如当使用异步管道 (userStreams | async) 时。
index: number: 当前item在iterable中的索引。
count: number: iterable的长度。
first: boolean: 当项目是可迭代对象中的第一个项目时为真。
last: boolean：当该项目是可迭代对象中的最后一个项目时为真。
偶数：布尔值：当项目在可迭代对象中具有偶数索引时为真。
odd: boolean: 当项目在 iterable 中有奇数索引时为真。

ngFor 以索引作为属性中的值

ngFor with index as value in attribute

angular

ngfor

Angular >= 2

Angular = 1