Здравствуйте. Только начала изучение разработки веб-приложений с помощью 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());
}
}
Средний
Простой
