我有一个简单的ngFor循环,它还可以跟踪当前索引。我想把索引值存储在一个属性中,这样我就可以打印它了。

我基本上有这个:

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

我想将#I的值存储在属性数据索引中。我尝试了几种方法,但都没有奏效。

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

如何将索引值存储在数据索引属性中?


当前回答

添加这个迟到的答案,以显示大多数人会遇到的情况。如果您只需要查看列表中的最后一项,请使用最后一个关键字:

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

这将为除最后一项之外的每个项添加分隔符组件。

由于下面的注释,我将添加可以别名为本地变量的ngFor导出值的其余部分(如文档中所示):

$implict:T:可迭代的(ngForOf)。ngForOf:NgIterable:可迭代表达式的值。当表达式比属性访问更复杂时,例如当使用异步管道(userStreams|async)时,这很有用。index:number:可迭代项中当前项的索引。count:number:可迭代的长度。first:boolean:当项是可迭代项中的第一个项时为True。last:boolean:当项是可迭代项中的最后一项时为True。even:boolean:当项在可迭代项中具有偶数索引时为True。odd:boolean:当项在可迭代项中具有奇数索引时为True。

其他回答

试试这个

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

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

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

您可以直接使用[attr.dataindex]将索引保存到Angular版本2和更高版本中提供的数据索引属性。

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

添加这个迟到的答案,以显示大多数人会遇到的情况。如果您只需要查看列表中的最后一项,请使用最后一个关键字:

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

这将为除最后一项之外的每个项添加分隔符组件。

由于下面的注释,我将添加可以别名为本地变量的ngFor导出值的其余部分(如文档中所示):

$implict:T:可迭代的(ngForOf)。ngForOf:NgIterable:可迭代表达式的值。当表达式比属性访问更复杂时,例如当使用异步管道(userStreams|async)时,这很有用。index:number:可迭代项中当前项的索引。count:number:可迭代的长度。first:boolean:当项是可迭代项中的第一个项时为True。last:boolean:当项是可迭代项中的最后一项时为True。even:boolean:当项在可迭代项中具有偶数索引时为True。odd:boolean:当项在可迭代项中具有奇数索引时为True。

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

以下是更新的plunker:http://plnkr.co/edit/LiCeyKGUapS5JKkRWnUJ?p=preview.