Supongamos que tenemos la siguiente estructura de datos que te responde tu API (backend).
interface Task {
id: number;
title: string;
description?: string | null;
created_at?: string | Date | null;
updated_at?: string | Date | null;
}
Bien, ahora tenemos que preparar el servicio/proveedor que es el encargado de obtener/modificar datos de tu API u otro lugar.
@Injectable()
export class TaskService {
private baseUrl: string = environment.baseUrl;
constructor(private http: HttpClient) {} // Angular 4.3+
// constructor(private http: Http) {} // Angular 2+
read(id: number): Observable<Task> {
return this.http.get<Task>(`${this.baseUrl}/v1/tasks/${id}`);
}
readAll(): Observable<Task[]> {
return this.http.get<Task[]>(`${this.baseUrl}/v1/tasks`);
}
create(task: Task): Observable<Task> {
return this.http.post<Task>(`${this.baseUrl}/v1/tasks`, task);
}
update(task: Task): Observable<Task> {
return this.http.put<Task>(`${this.baseUrl}/v1/tasks/${task.id}`, task);
}
delete(id: number): Observable<Task> {
return this.http.delete<Task>(`${this.baseUrl}/v1/tasks/${id}`);
}
}
Por supuesto puedes enviar lo que necesites, en este ejemplo sencillo envío el ejemplo tal cual, y asumo que mi servidor recibe un JSON y mi cliente recibe un JSON, si quieres cambiar las cabeceras (headers) puedes hacerlo. Lo importante es que las peticiones http de angular retornan un Observable, aunque puedes convertirlo en Promesa si así lo deseas.
Continuemos. Ahora necesitas crear tu componente para consumir tu servicio y para actualizar tus datos/lista únicamente debes de ir modificándola. Ojo, se puede actualizar una fuente de datos (datasource) de muchas maneras, esta es la más clásica, la mutable.
@Component({
selector: 'app-tasks',
templateUrl: './tasks.component.html',
styleUrls: ['./tasks.component.css'],
})
export class TasksComponent implements OnInit {
tasks = new Array<Task>();
constructor(private taskService: TaskService) {}
ngOnInit() {
this.readTasks();
}
createTask(task: Task) {
this.taskService.create(task).subscribe(
(taskCreated: Task) => {
this.tasks.push(taskCreated);
console.log('createTask: OK')
},
(err: any) => console.error('createTask: ERROR')
)
}
readTasks() {
this.taskService.readAll().subscribe(
(tasks: Task[]) => {
this.tasks = tasks;
console.log('readTasks: OK')
},
(err: any) => console.error('readTasks: ERROR')
)
}
updateTask(task: Task) {
this.taskService.update(task).subscribe(
(taskUpdated: Task) => {
const index = this.tasks.findIndex(t => t.id === taskUpdated.id);
if (index > -1) {
this.tasks[index] = taskUpdated;
}
console.log('updateTask: OK')
},
(err: any) => console.error('updateTask: ERROR')
)
}
deleteTask(task: Task) {
this.taskService.delete(task).subscribe(
(taskDeleted: Task) => {
this.tasks = this.tasks.filter(t => t.id !== taskDeleted.id);
console.log('deleteTask: OK')
},
(err: any) => console.error('deleteTask: ERROR')
)
}
}
Y ya está, pero no olvides importar tu servicio en el módulo que esté ubicado tu componente, por lo general si no utilizas más módulos que el principal AppModule ahí es donde debe de estar, tanto el servicio/proveedor como el módulo de Http de Angular, que hay 2: HttpModule (Angular 2) y HttpClientModule (a partir de Angular 4.3).
@NgModule({
imports: [HttpModule, HttpClientModule],
declarations: [TasksComponent],
providers: [TaskService],
exports: [TasksComponent],
bootstrap: [AppComponent]
})
export class AppModule {}