Angular：在 ngFor 中获取当前索引答案

【问题标题】：Angular: Get current index in ngForAngular：在 ngFor 中获取当前索引
【发布时间】：2018-08-13 21:30:24
【问题描述】：

我有以下角度：

<div class="test" *ngFor="let item of data; let i = index">
    {{item}}
</div>

<div class="function_div" (click)="test(i);">Test Button </div>

然后在.ts，

export class test{
   
  test(){
     console.log(i);
  }
  
}

我想得到一个具有当前索引号的变量。

我将如何做才能获得当前索引？

谢谢

【问题讨论】：

你要去哪里获取索引？在您看来，ngFor 范围之外的当前索引是多少？
这是你的答案stackoverflow.com/questions/36322829/…
所以，我试图获取 ngFor 的索引，以便在触发另一个函数之前与数据数组进行比较。例如，当我点击一个按钮时会触发test()函数，然后它会检查当前的index，并对其进行处理。
除非您从<div class="test"> 中调用，否则没有“当前”索引。在那个 div 之外，你的“循环”是完整的，你只有 data 数组。
我明白了。谢谢你。我明白了。

标签： angular

【解决方案1】：

根据 OP 对问题的评论：

所以，我正在尝试获取 ngFor 的索引以执行在触发另一个函数之前与数据数组进行比较。为了例如，当我点击一个按钮时会触发 test() 函数，然后它将检查当前索引，并对其进行处理。

你应该这样做：

<div class="test" *ngFor="let item of data; let i = index">
    // In your case this line should be within ngFor loop
    <div class="function_div" (click)="test(i);">Test Button </div>
    {{item}}
</div>

注意：永远不要调用类似的函数：

{{ test(i) }} // 这将在每次发生任何变化时执行循环

【讨论】：

是的，我了解您最后的评论。我会小心的。谢谢！
只是一个简单的问题。只有在 ngFor 完成迭代时才调用 test() 函数的最佳方法是什么？因此，我可以看到最后一个索引号。
@steveKim，太好了，因为有时它会引起大问题，BTW 编码快乐
如果你想得到最后一个索引，那么你可以使用 array.length 函数，你也可以在 ngFor 之外访问

【解决方案2】：

为什么你不...

<div class="test" *ngFor="let item of data; let i = index">
    {{ test(i) }}
</div>


export class test{

  test(i: number){
     console.log(i);
  }

}

【讨论】：

我想我应该澄清一下函数 (test()) 将在 <div class="test"> 之外使用，因此我需要另一种解决方法。
@steveKim -- 索引仅在您迭代时存在。如果你退出迭代，它就不存在——这就是 Kenry 的建议。
我明白了。谢谢你。我明白了。

【解决方案3】：

你总是可以走简单的路，像这样：

    <div *ngFor =" let item of items; let i = index">

          {{ i }} {{ item }}

    </div>

【讨论】：

【解决方案4】：

您可以创建自己的指令以通过*ngFor 获取每个函数调用的当前索引。你可以关注这个answer。

【讨论】：