So erhalten Sie Daten von Observable in Angular2


75

Ich versuche, das Ergebnis des httpAnrufs Angularmit zu druckenrxjs

Betrachten Sie den folgenden Code

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

Wann immer ich versuchte, das Ergebnis auszudrucken, kehre getconfigimmer zurück

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

obwohl ich stattdessen ein json-Objekt zurückgebe.

Wie würde ich das Ergebnis ausdrucken getConfig?


Hast du die Lösung bekommen?
Ramya

Antworten:


97

Sie müssen das Observable abonnieren und einen Rückruf übergeben, der die ausgegebenen Werte verarbeitet

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

1
Es ist res.json()anstelle vonres.json
Pardeep Jain

hmm. aber habe es nicht erwähnt, also Kommentar
posten

Ich bin mir nicht sicher, was du mit deinem letzten Kommentar meinst. Es ist bereits im Code in der Frage. Keine Urkunde, um beim Abonnieren erneut in JSON zu konvertieren.
Günter Zöchbauer

hmm ich möchte nur sagen, dass wir zur Zeit in .json () oder .map () konvertieren müssen.
Pardeep Jain

console.log (JSON.stringify (val))
bmusical

23

Angular basiert auf der Basis von Observable anstelle von Promise ab AngularJS 1.x. Wenn wir also versuchen, Daten mithilfe httpdieser Basis zu erhalten, wird Observable anstelle von Promise zurückgegeben, wie Sie es getan haben

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

Um dann Daten zu erhalten und sie anzuzeigen, müssen wir sie mit RxJs Funktionen wie in die gewünschte Form konvertieren .map() function and .subscribe()

.map () wird verwendet, um das Observable (von http request erhalten) in eine beliebige Form zu konvertieren, wie .json(), .text() auf der offiziellen Website von Angular angegeben.

.subscribe () wird verwendet, um diese beobachtbaren Antworten zu abonnieren und in eine Variable zu setzen, von der aus wir sie in der Ansicht anzeigen

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

16
this.myService.getConfig().subscribe(
  (res) => console.log(res),
  (err) => console.log(err),
  () => console.log('done!')
);
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.