javascript - 子コンポーネントで ngFor インデックス変数を使用する方法

Question

ngFor を使用して配列からリストを作成し、他のコンポーネントを介してそのリストの要素をインポートしています。

私のリスト コンポーネントでは、インデックスを取得するために ngFor を使用しています。子コンポーネント内でこのインデックスを使用して (コードを参照)、動的変数を作成したいと考えていますが、動作させることができないようです。

//main list html template
<li *ngFor="#task of taskService.tasks; #i = index" class="list-group-item">
    <task-item [task]="task"></task-item>
</li>


//task item component html template
<div class="read-only">
    <label [contentEditable]="taskService.editable[i] == true" ng-model="task.title">{{task.title}}</label>
    <p [contentEditable]="taskService.editable[i] == true" ng-model="task.description">{{task.description}}</p>
    <task-actions [task]="task"></task-actions>
</div>


//task actions component html template 
<button type="button" (click)="taskService.deleteTask(task.title)"   class="btn btn-danger btn-xs">delete</button>
<button type="button" (click)="taskService.editTask(i)"     class="btn btn-info btn-xs">Edit</button>
<button type="button" (click)="completeTask()"  class="btn btn-success btn-xs">complete</button>

「taskService」内に、クリック時に呼び出されるメソッドがあります - editTask(i) - 配列アイテムのインデックスを渡すことができるようにしたいです

私のクラスは次のようになります。

export taskService {

  editable = [];

  editTask(i){
     this.editable[i] == true;
  }

}

十分に説明できていることを願っています。さらに情報が必要な場合はお知らせください。