html - 如何使用express和Angular 2( typescript )编辑待办事项列表中的标题

Question

我使用express和Angular 2 - 待办事项列表在网络上制作了我的第一个应用程序。 现在我有添加新任务、删除和更改复选框的事件，但我不知道如何通过单击项目或按钮“编辑”来编辑标题。

任务.ts

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

文件 htmltasks.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());
    }
}

Answer 1

您可以考虑以下几点。

• 将 id 添加到您的 Task 类中，它将帮助您识别要更新的任务。
• 将该id传递给编辑操作并使用任务文本填充您的输入控件
• 用户完成更新任务后，您可以将任务 ID 和文本发送到服务器。