0

Estoy desarrollando una aplicación web y para esto uso el framework angular2 en el cliente (Frontend) y en el servidor(Backend) tengo servicios en java hechos en hibernate para acceder a la capa de datos.

Para consumir los servicios del (Backend) desde (Frontend) estoy usando los observables pero no me funcionan. Pues cuando inserto un nuevo valor no me refresca la lista de valores.

Quisiera que alguien me mostrara un ejemplo del uso de los observables en angular 2 consumiendo servicios Http, que eliminar, insertara y refresque las lista de objetos con la cual estoy trabajando.

1 respuesta 1

0

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 {}
4
  • Gracias por tu tiempo ty responder a mi pregunata que me ha servido de ayuda. Pero quiciera preguntar algo quye a lo mejor tinen mas conocimientos sobre Observables en angular2. Commented el 29 ago. 2017 a las 11:59
  • Pero con esta forma se garantiza de que si hay varios usuarios de mi app viendo al mismo tiempo la lista de tareas y si uno de ellos agrega uno se le refresca la lista a todos?. Commented el 29 ago. 2017 a las 13:16
  • Eso es otro concepto, eso son sockets.
    – dddenis
    Commented el 29 ago. 2017 a las 13:33
  • Excelente. Es increible que leyendo cientos de posts, tutoriales, etc. recien lo haya podido comprender bien con tu respuesta. Gracias @dddenis
    – Enrique
    Commented el 11 ene. 2018 a las 22:24

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.