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

Question

这个问题在这里已有答案：

• ngFor with index as value in attribute 6个答案

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

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

例如：

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

Answer 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。