ngFor 将索引作为属性中的值
Posted
技术标签:
【中文标题】ngFor 将索引作为属性中的值【英文标题】：ngFor with index as value in attribute 【发布时间】：2016-05-26 03:24:20 【问题描述】：我有一个简单的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 属性中？
【问题讨论】：
【参考方案1】：我会使用这种语法将索引值设置为 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。
【讨论】：
其实attr.是一种语法告诉Angular2将表达式的值设置为属性名。我猜这不仅仅是评估 JSON ;-) 请参阅此链接：angular.io/docs/ts/latest/guide/template-syntax.html
谢谢，这就行了。另外，我打算将ngFor 放在li 上，而不是ul。
我回滚了最近的编辑，以便同时获得原始答案和新的更新代码值。我正在寻找一些早期的 beta 版本，发现这个答案已被修改，因此它不再适用于 angular 2 的 beta 版本。
更新：08/2017
截至 2018 年 10 月 17 日，Angular 6 正在使用 *ngFor="let item of items; index as i" 请参阅下面 Leo 的回答。【参考方案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
编辑/更新：
*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>
编辑/更新
角度 7/8
<ul *ngFor="let item of items; index as i">
<li [attr.data-index]="i">item</li>
</ul>
【讨论】：
而#item 应该是let item ;-)【参考方案3】：
我认为它之前已经得到了回答，但如果您正在填充无序列表，则只是一个更正，*ngFor 将出现在您想要重复的元素中。所以它应该是 insdide <li>。此外，Angular2 现在使用 let 来声明一个变量。
<ul>
<li *ngFor="let item of items; let i = index" [attr.data-index]="i">
item
</li>
</ul>
【讨论】：
我认为最好在 ul 标签中指定 *ngFor 指令 item 如果你在ul标签中指定了ngFor，那么要重复的实体就是ul，但是这里你不想重复ul，你只想迭代列表元素即li。 【参考方案4】：其他答案是正确的，但您可以完全省略[attr.data-index] 而直接使用
<ul>
<li *ngFor="let item of items; let i = index">i + 1</li>
</ul
【讨论】：
【参考方案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
Description Local variables单元测试示例
ng_for_spec.ts另一个有趣的例子
Grouping【讨论】：
就是这样！截至 2018 年 10 月 17 日工作。谢谢你。 （为什么他们一直在改变语法，这么烦人？ 这是一个比第一个更好更简单的答案。index as i 效果很好，谢谢。但是*ngFor 不是意味着要重复的元素（例如<li> 在这种情况下）？您建议的代码创建多个<ul>s，而不是多个<li>s。
index as i 比let i = index 更优雅【参考方案6】：
试试这个
<div *ngFor="let piece of allPieces; let i=index">
i // this will give index
</div>
【讨论】：
【参考方案7】：您可以直接使用 [attr.data-index] 将索引保存到 Angular 2 及更高版本中可用的 data-index 属性。
<ul*ngFor="let item of items; let i = index" [attr.data-index]="i">
<li>item</li>
</ul>
【讨论】：
【参考方案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>
【讨论】：
【参考方案9】：添加这个较晚的答案以显示大多数人会遇到的案例。如果您只需要查看列表中的最后一项是什么，请使用last 关键字：
<div *ngFor="let item of devcaseFeedback.reviewItems; let last = last">
<divider *ngIf="!last"></divider>
</div>
这会将分隔符组件添加到除最后一项之外的每个项目。
由于下面的评论，我将添加其余的 ngFor 导出值，这些值可以别名为局部变量（如文档中所示）：
【讨论】：
你怎么知道的？是否有某种文档，或打字稿文件，或列出我们可以使用的所有关键字的东西？ @EliezerBerlin 在官方的 Angular ngFor 文档中提到 angular.io/api/common/NgForOf 一旦我在 SO 或 Google 之前开始学习文档，我就成为了一个更好的 Angular 开发人员，我保证如果你这样做，你将成为一个更好的 Angular dev，文档已经走了很长一段路，Angular 现在真的很成熟了。 该死的。我希望通过浏览 .ts 文件或其他东西来找到 Angular Material 表的类似列表。材料表的文档要糟糕得多。 在 angular/common 中的 common.d.ts 是 ngFor 的来源以上是关于ngFor 将索引作为属性中的值的主要内容，如果未能解决你的问题，请参考以下文章