如何将 ngFor 循环的索引值传递给组件？ [复制]

Posted 2023-02-22

【中文标题】如何将 ngFor 循环的索引值传递给组件？ [复制]

【英文标题】：How to pass the index value of a ngFor loop into the component? [duplicate]

【发布时间】：2017-11-20 14:20:48

【问题描述】：

我的代码中有一个 ngFor 循环。 在这个 ngFor 循环中我有一个 div，点击这个 div 我想将索引值传递给类型脚本文件。

我是 Angular 2 的新手，任何帮助将不胜感激。

例如：

`<div *ngFor="let y of characters;let i = index">
    <div (click)="passIndexValue()">
    </div>
<div>`

【问题讨论】：

你为什么不使用“i”？我的意思是你可以将“i”传递给 passIndexValue() 函数吗？

【参考方案1】：

<div *ngFor="let y of characters;let i = index">
    <div (click)="passIndexValue(i)">
    </div>
<div>`


passIndexValue(index)
   console.log(index);//clicked index

你也可以像这样将值传递给组件（假设下面使用@Input）

<div *ngFor="let y of characters;let i = index">
    <childComponent [index]="i">
    </childComponent>
<div>`

然后在组件对象上取值：

@Input() index: number;

并像这样直接在子组件的模板中使用：

<div id="mydivinstance_index"></div>

从而允许组件具有基于 *ngFor 循环的唯一 ID。

【讨论】：

这不工作总是得到 0

@user1703145 能否请您发布您的代码，以便我为您修复它