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

Question

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

我是Anglular 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。