Angular2のngForループ内のローカルテンプレートの一時変数

Question

テンプレート内のforループ内で、editableトグルフラグを設定して、各反復アイテムの表示と非表示を切り替えたいとします。項目は、たとえば行にすることができます。

ローカル変数を簡単に作成する方法を理解できませんでした。私は各行またはいくつかのディレクティブ用のコンポーネントを作成したくありません。 Angular1では、ng-init="editable=false"とすることができます。子供のdomのどこかにある場合は、editable=!editableで切り替えることができます。これは、この特定の子の範囲内にあります。

これを改善するのを手助けしてください。現在、これはすべての行を切り替えます。私は各行にローカル変数を持たせる必要があります。

<div *ngFor="let c of comments"> 
    <button (click)="editable=!editable">edit</button> 
    <p *ngIf="editable"><textarea>{{c.message}}</textarea></p> 
</div> 

angular2〜4でこれを行う方法は？

Answer 1

<div *ngFor="let c of comments;let i=index"> 
    <button (click)="toggleEditable(i)">edit</button> 
    <p *ngIf="editable[i]"><textarea>{{c.message}}</textarea></p> 
</div> 

editable = [true, false, true]; 

toggleEditable(idx) { 
    this.editable[idx] = !this.editable[idx]; 
} 

comments

editableとして同じ数の値を有する必要があります。