wake-up-neo.com

So erhalten Sie Daten von Observable in Angular2

Ich versuche, das Ergebnis des http -Aufrufs in Angular mit rxjs auszudrucken.

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

Immer wenn ich versucht habe, das Ergebnis von getconfig auszudrucken, wird es zurückgegeben

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

obwohl ich stattdessen ein json-Objekt zurückgebe.

Wie würde ich das Ergebnis von getConfig ausdrucken?

49
testing

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

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

Angular basiert auf Observable anstelle von Promise Base wie AngularJS 1.x. Wenn wir also versuchen, Daten mit http abzurufen, wird Observable anstelle von Promise zurückgegeben, wie Sie es getan haben

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

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

.map () wird verwendet, um die beobachtbare Datei (die von einer http-Anfrage empfangen wurde) in eine Form wie .json(), .text() zu konvertieren, wie auf Angulars offizieller Website angegeben.

.subscribe () wird verwendet, um diese beobachtbare Antwort 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
Pardeep Jain
this.myService.getConfig().subscribe(
  (res) => console.log(res),
  (err) => console.log(err),
  () => console.log('done!')
);
15
micronyks