Angular 2：如何在单击列表时将按钮标题从添加更改为编辑

Question

如何在单击列表时将按钮标题从添加更改为编辑以下是我的模板：

 <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>

以下是当我们select列表中的任务时我的组件代码：

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;
}

Angular 2：如何在单击列表时将按钮标题从添加更改为编辑

Angular 2 : How can i change the button caption from add to edit on click of the list

angular2-forms

angular2-template