2角度：どのように私は、私は次のリスト のクリックで編集することがaddからボタンのキャプションを変更することができますどのようにリストのクリック

Question

に編集することがaddからボタンのキャプションを変更することができますが、私のテンプレートです：

<div> 
<label>Task:</label> <input #taskNameRef/> 
    <button (click)="addTask(taskNameRef);">Add</button> 
    </div> 
<ul class="tasks"> 
<li *ngFor="let task of tasks" (click)="onSelect(task)" 
    [class.selected]="task === selectedTask"> 
    <span>{{task.taskName}}</span> 
    <button (click)="deleteTask(task.taskName);" class="delete">x</button> 
    </li> 
</ul> 

私たちは、リストからタスクを選択すると、以下の

は私のコンポーネントのコードです：

selectedTask: Task;  

onSelect(task: Task): void { 
    this.selectedTask = task; 
} 

注：私はAngular2にちょうど初心者です。

Answer 1

は以下の最も簡単なものですこれを行うための複数の方法があります：コンポーネントで

<button *ngIf="!this.isEditBtn" (click)="addTask(taskNameRef);">Add</button> 
<button *ngIf="this.isEditBtn" (click)="editTask(taskNameRef);">Edit</button> 

：

isEditBtn = false; 
onSelectList(task){ 
    this.isEditBtn = !this.isEditBtn; 
}