Как изменить значение title todo list-a в express+angular 2 (typescript)?

Question

[alexandrtym]

Здравствуйте. Только начала изучение разработки веб-приложений с помощью express (node js) и angular 2. Возник вопрос изменения введенных данных в приложении todo list (task list),например, если дважды нажать на title строки, или добавить рядом для каждого кнопку edit.
Само приложение ( среди уже готовых events пока есть только добавление, удаление строки и изменение состояния checkbox)

Task

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

Файл html tasks.component.html

<form class="form-group"(submit)="addTask($event)">
        <input type="text" [(ngModel)]="title" name="title" class="form-control" placeholder="Add Task...">    
      <!--</div>  -->

</form>

    <!--<div class="task-list">-->
        <div *ngFor="let task of tasks" class="todo">
                  <button  class="delete icon">
                <i  class="material-icons">delete</i>
            </button>
            </div>-->
            <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>

Файл 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

[Alex]

Ну на клиенте у вас уже все готово. UpdateStatus отправляет измененный title. так что достаточно на сервере обработать изменение. Ну и поменять
<span class = "title"> {{task.title}}</span>
на по какому либо событию
<input [(ngModel)]="task.title">

Comments

[alexandrtym]

UpdateStatus это для checkbox, а не для текста

[Alex]

Если бы только для чека, то зачем отправлять на сервер текущее название задачи?