Angular 2 Http.Post keine Anfrage senden

Question

Versuchen, einen einfachen POST auf meinem Server mit einigen Daten zu machen und einige JSON-Daten zurückgeben. (Zur Zeit läuft es durch den Anruf, aber ich sehe nichts in meinem Netzwerk Tab, dass es tatsächlich versucht, es zu machen?)

Mein Service (api.service.ts)

import { Injectable } from '@angular/core'; 
 
import { Headers, Http, Response} from '@angular/http'; 
 
import {Observable} from 'rxjs/Rx'; 
 

 
// Import RxJs required methods 
 
import 'rxjs/add/operator/map'; 
 
import 'rxjs/add/operator/catch'; 
 

 
@Injectable() 
 
export class ApiService { 
 

 
\t private headers = new Headers({'Content-Type': 'application/json'}); 
 
    \t private myUrl = 'https://www.mywebsite.com'; // URL to web api 
 
    \t private payLoad = {"thingy1":"Value1", "thingy2":"value2"}; 
 

 
    \t constructor(private http:Http) { } 
 

 
    \t getData() { 
 
     this.http.post(this.myUrl, JSON.stringify(this.payLoad), this.headers) 
 
     \t .map((res:Response) => res.json()) 
 
      .catch((error:any) => Observable.throw(error.json().error || 'Server error')); 
 
    } 
 

 
}

Dann habe ich nur die getData-Methode in einer Header-Komponente ausgeführt, nur um es auszulösen. (header.component.ts)

import { Component, OnInit } from '@angular/core'; 
 

 
//Service 
 
import { ApiService } from '../services/api.service'; 
 

 

 
@Component({ 
 
    selector: 'app-header', 
 
    templateUrl: './header.component.html', 
 
    styleUrls: ['./header.component.scss'] 
 
}) 
 

 
export class HeaderComponent implements OnInit { 
 

 
    constructor(private service:ApiService) { 
 
    this.service.getData(); //Fire getData from api.service 
 
    } 
 

 
    ngOnInit() { } 
 

 
}

Answer 1

beobachtbare faul sind, selbst wenn Sie sie initialisieren, werden sie nicht ausgeführt werden. Mindestens ein Teilnehmer muss zu diesem Observablen explizit subscribe hören, um diesen Strom zu hören. Kurz gesagt: Sie werden nur ausgeführt, wenn Sie sie abonnieren.

this.service.getData().subscribe(
    (data) => console.log(data) 
); 

Answer 2

Stellen Sie sicher, dass Sie Ihre beobachtbaren Daten abonnieren. Der RxJS Beobachter hat 2 Teile,

• next() - es Push-Daten, die von eckigen selbst getan wird.
• abonnieren - Sie müssen in Ihrer Komponente Daten aus beobachtbaren erhalten.

versuchen, etwas unterhalb

this.service.getData().subscribe(
    (data) => { 
    //process your data here 
    } 
);