typescript - example - observables angular 5

Cómo obtener datos observables en angular2

Question

Estoy tratando de imprimir el resultado de la llamada http en Angular usando rxjs

Considera el siguiente código

import { Component, Injectable, OnInit } from ''@angular/core'';
import { Http, HTTP_PROVIDERS } from ''@angular/http'';
import ''rxjs/Rx'';

@Injectable()
class myHTTPService {
  constructor(private http: Http) {}

  configEndPoint: string = ''/my_url/get_config'';

  getConfig() {

    return this.http
      .get(this.configEndPoint)
      .map(res => res.json());
  }
}

@Component({
    selector: ''my-app'',
    templateUrl: ''./myTemplate'',
    providers: [HTTP_PROVIDERS, myHTTPService],


})
export class AppComponent implements OnInit {

    constructor(private myService: myHTTPService) { }

    ngOnInit() {
      console.log(this.myService.getConfig());
    }
}

Cada vez que traté de imprimir el resultado de getconfig siempre regresaba

Observable {_isScalar: false, source: Observable, operator: MapOperator}

aunque devuelvo un objeto json en su lugar.

¿Cómo imprimiría el resultado de getConfig ?

Answer 1

Angular se basa en la base observable en lugar de la promesa a partir de angularjs 1.x, por lo que cuando intentamos obtener datos utilizando http , devuelve observable en lugar de promesa, como hizo

 return this.http
      .get(this.configEndPoint)
      .map(res => res.json());

luego, para obtener datos y mostrarlos en la vista, tenemos que convertirlos en la forma deseada mediante las funciones de RxJ como la función .map() function and .subscribe()

.map () se utiliza para convertir lo observable (recibido de la solicitud http) a cualquier forma como .json(), .text() como se indica en el sitio web oficial de Angular,

.subscribe () se usa para suscribir esas respuestas observables y poner toneladas en alguna variable, por lo que la mostramos en la vista

this.myService.getConfig().subscribe(res => {
   console.log(res);
   this.data = res;
});

Answer 2

Debe suscribirse al observable y pasar una devolución de llamada que procesa los valores emitidos

this.myService.getConfig().subscribe(val => console.log(val));

Answer 3

this.myService.getConfig().subscribe(
  (res) => console.log(res),
  (err) => console.log(err),
  () => console.log(''done!'')
);