web-dev-qa-db-ja.com

ngForループのインデックス値をコンポーネントに渡す方法は？

コードにngForループがあります。そして、このngForループ内にdivがあり、このdivをクリックすると、インデックス値をタイプスクリプトファイルに渡します。

私はAngular 2を初めて使用し、どんな助けも感謝します。

例えば：

`<div *ngFor="let y of characters;let i = index">
    <div (click)="passIndexValue()">
    </div>
<div>`
angulartypescriptangular2-services
6
Umair Khan
<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を持つことができます。

23
Aravind