web-dev-qa-db-fra.com

Comment obtenir des données observables dans angular2

J'essaie d'imprimer le résultat de http appeler dans Angular avec rxjs

Considérons le code suivant

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

Chaque fois que j'essaye d'imprimer le résultat de getconfig, il retourne toujours

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

même si je retourne un objet json à la place.

Comment puis-je imprimer le résultat de getConfig?

typescriptangularreactive-programmingrxjsobservable
49
testing

Vous devez vous abonner à l'observable et transmettre un rappel qui traite les valeurs émises.

this.myService.getConfig().subscribe(val => console.log(val));
63
Günter Zöchbauer

Angular est basé sur observable au lieu de promesse de angularjs 1.x, donc lorsque nous essayons d’obtenir des données en utilisant http, il retourne observable au lieu de promesse, comme vous l’avez fait.

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

ensuite, pour obtenir des données et les afficher, nous devons les convertir au format souhaité à l'aide de fonctions telles que .map() function and .subscribe()

.map () est utilisé pour convertir l'observable (reçu de la requête http) en une forme telle que .json(), .text() comme indiqué sur le site officiel d'Angular,

.subscribe () est utilisé pour inscrire les réponses observables et les placer dans une variable de sorte que nous les affichons dans la vue

this.myService.getConfig().subscribe(res => {
   console.log(res);
   this.data = res;
});
16
Pardeep Jain
this.myService.getConfig().subscribe(
  (res) => console.log(res),
  (err) => console.log(err),
  () => console.log('done!')
);
15
micronyks