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

Question

我的代码中有一个 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。