Come ottenere i dati da osservabili in angular2

Question

sto cercando di stampare il risultato di http chiamata in Angular utilizzando rxjs

Si consideri il seguente codice

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()); 
    } 
} 

Ogni volta che ho provato a stampare il risultato di getconfig restituisce sempre

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

anche se restituisco un oggetto JSON.

Come si stampa il risultato di getConfig?

Answer 1

È necessario abbonarsi al osservabile e passare un callback che elabora i valori

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

Answer 2

angolare emessa si basa sulla osservabile al posto della base promessa di angularjs 1.x, in modo che quando cerchiamo di ottenere dati utilizzando http esso restituisce osservabile, invece di promesse, come avete fatto

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

poi per ottenere i dati e mostrare in mostra dobbiamo convertirlo in forma desiderata utilizzando le funzioni RxJs come .map() function and .subscribe()

.map() viene utilizzata per convertire il osservabile (ricevuta da richiesta HTTP) a qualsiasi forma come .json(), .text() come indicato nel sito ufficiale di angolare,

.Iscriviti() viene utilizzato per iscriversi coloro risposta osservabile e ton mettere in qualche variabile in modo da cui visualizziamo nella visualizzazione

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

Answer 3

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