如何使用express和angular 2(打字稿)在待办事项列表中编辑标题

我使用express和Angular 2 – todo列表在web上创build我的第一个应用程序。 现在我有事件来添加新的任务,删除和更改checkbox,但我不知道如何编辑标题通过点击,例如,项目或button上的“ 编辑 ”。

我的任务列表

Task.ts

export class Task{ title: string; isDone: boolean; } 

文件html tasks.component.html

 <div *ngFor="let task of tasks" class="todo"> <button class="delete icon"> <i class="material-icons">delete</i> </button> <button class="checkbox icon" (click)="updateStatus(task)"> <i class="material-icons">{{task.isDone ? 'check_box' : 'check_box_outline_blank' }}</i> </button> <span class = "title"> {{task.title}}</span> <div class="actions" (click)="deleteTask(task._id)"> <button class="delete icon"> <i class="material-icons">delete</i> </button> </div> <div class="actions" (click)="////////////////////////EDIT/////////////"> <button class="editicon"> <i class="material-icons">edit</i> </button> </div> </div> 

文件tasks.component.ts

 import { Component } from '@angular/core'; import {TaskService} from '../../services/task.service'; import {Task} from '../../../Task'; @Component({ moduleId: module.id, selector: 'tasks', templateUrl: 'tasks.component.html' }) export class TasksComponent { tasks: Task[]; title: string; constructor(private taskService:TaskService){ this.taskService.getTasks() .subscribe(tasks => { this.tasks = tasks; }); } addTask(event){ event.preventDefault(); var newTask = { title: this.title, isDone: false } this.taskService.addTask(newTask) .subscribe(task => { this.tasks.push(task); this.title = ''; }); } deleteTask(id){ var tasks = this.tasks; this.taskService.deleteTask(id).subscribe(data => { if(data.n == 1){ for(var i = 0;i < tasks.length;i++){ if(tasks[i]._id == id){ tasks.splice(i, 1); } } } }); } updateStatus(task){ var _task = { _id:task._id, title: task.title, isDone: !task.isDone }; this.taskService.updateStatus(_task).subscribe(data => { task.isDone = !task.isDone; }); } } 

文件task.service.ts

 import {Injectable} from '@angular/core'; import {Http, Headers} from '@angular/http'; import 'rxjs/add/operator/map'; @Injectable() export class TaskService{ constructor(private http:Http){ console.log('Task Service Initialized...'); } getTasks(){ return this.http.get('/api/tasks') .map(res => res.json()); } addTask(newTask){ var headers = new Headers(); headers.append('Content-Type', 'application/json'); return this.http.post('/api/task', JSON.stringify(newTask), {headers: headers}) .map(res => res.json()); } deleteTask(id){ return this.http.delete('/api/task/'+id) .map(res => res.json()); } updateStatus(task){ var headers = new Headers(); headers.append('Content-Type', 'application/json'); return this.http.put('/api/task/'+task._id, JSON.stringify(task), {headers: headers}) .map(res => res.json()); } } 

你可以考虑以下几点。

  • id添加到您的Task类,它将帮助您确定要更新哪个任务。
  • 传递该id来编辑动作,并使用任务文本填充input控件
  • 一旦用户完成更新他/她的任务,您可以发送任务ID和文本到服务器。