ngFor with index作为属性中的值

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="let item of items; let i = index" [attr.data-index]="i">
        {{item}}
    </li>
</ul>

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

更新最近的角度2版本 您必须使用let声明值而不是#.

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

Answer 2

在Angular 5/6/7中:

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

(参见局部变量)

Answer 3

仅仅是对此的更新,Thierry的答案仍然是正确的,但Angular2已经对以下内容进行了更新:

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

现在#i = index应该是let i = index

编辑/ UPDATE:

本*ngFor应该是你想要的foreach的元素,所以在这个例子中它应该是:

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

编辑/ UPDATE

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

您可以直接使用[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 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

添加这个迟到的答案是为了展示一个大多数人都会遇到的案例。如果您只需要查看列表中的最后一项是什么，请使用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 : 可迭代对象中当前项的索引。
• count: number : 可迭代的长度。
• first: boolean : 当项目是可迭代中的第一个项目时为真。
• last: boolean : 当项目是可迭代中的最后一项时为真。
• even: boolean : 当项目在可迭代中具有偶数索引时为真。
• 奇数：布尔值：当项目在可迭代中具有奇数索引时为真。