クリック時にテキストボックスを編集してサイドにボタンを追加する方法角度

Question

スタックオーバーフローコメントと同様に機能を追加しようとしています。編集リンクをクリックするとdivがテキストボックスに変換され、送信ボタンが表示されます。

しかし、問題は複数のコメントがあります。これはngForを介して入力されています。編集がクリックされた選択されたdivから読み込み専用のプロパティを削除するにはどうすればいいですか？

これは私が試みたものです。

<div class="tab-content"> 
     <div id="email" class="tab-pane active"> 
      <div *ngFor="let i of comments; let index = index" [@flyInOut]> 
       <div class="well"> 
        <input type=”text” value="{{i.comment}}" [readonly]="false" /><span> 
         Edited <time>{{today | amDifference: i.createdAt :'minutes' 
          : false}}</time> before 
        </span><a><i 
         class="align remove glyphicon glyphicon-remove-sign glyphicon-white" 
         (click)="edit(index)"></i></a> 
       </div> 
      </div> 
     </div> 
    </div> 

私はまた、私はすでにだけamDifference未満5分でコメントの編集]ボタンを有効にしてから、我々は示すために、どのように同じのバックエンドの一部を行っている時間を確認するようなものを持っているのが大好きです削除オプション。

Answer 1

あなたは、このようなように表示するように第二のテンプレートを提供するために、ngIf-Elseを使用することができます。

<div class="tab-content"> 
    <div id="email" class="tab-pane active"> 
     <div *ngFor="let i of comments; let index = index" [@flyInOut]> 
      <div *ngIf="i.editMode; else editBlock" class="well"> 
       <!-- Show stuff here --> 
       <a> 
        <i class="align remove glyphicon glyphicon-remove-sign glyphicon-white" 
         (click)="i.editMode=true"> 
        </i> 
       </a> 
      </div> 
      <ng-template #editblock> 
       <div class="well"> 
        <!-- Edit stuff here --> 
        <input type="button" (click)="i.editMode=false" value="Done"/> 
       </div> 
      </ng-template> 
     </div> 
    </div> 
</div>