Angular2/Http (POST) Header

Question

Ich kann die Header nicht ändern, wenn Sie eine POST-Anfrage machen. Ich habe versucht, ein paar Dinge:

Einfach Klasse:

export class HttpService { 
    constructor(http: Http) { 
     this._http = http; 
    } 
} 

Ich habe versucht:

testCall() { 
    let body = JSON.stringify(
     { "username": "test", "password": "abc123" } 
    ) 

    let headers = new Headers(); 
    headers.append('Content-Type', 'application/json'); // also tried other types to test if its working with other types, but no luck 

    this._http.post('http://mybackend.local/api/auth', body, { 
     headers: headers 
    }) 
    .subscribe(
     data => { console.log(data); }, 
     err => { console.log(err); }, 
     {} => { console.log('complete'); } 
    ); 
} 

2:

testCall() { 
    let body = JSON.stringify(
     { "username": "test", "password": "abc123" } 
    ) 

    let headers = new Headers(); 
    headers.append('Content-Type', 'application/json'); // also tried other types to test if its working with other types, but no luck 

    let options = new RequestOptions({ 
     headers: headers 
    }); 

    this._http.post('http://mybackend.local/api/auth', body, options) 
    .subscribe(
     data => { console.log(data); }, 
     err => { console.log(err); }, 
     {} => { console.log('complete'); } 
    ); 
} 

keiner der beiden arbeiten. Ich habe nicht vergessen, irgendwelche der Klassen zu importieren.

Ich benutze Google Chrome. Also überprüfe ich die Registerkarte "Netzwerk", meine Anfrage ist dort und es heißt mein Inhaltstyp ist text/plain.

Ist das ein Fehler oder mache ich etwas falsch?

UPDATE Ich habe vergessen, die Header-Klasse von Angular2/http zu importieren:

import {Headers} from 'angular2/http'; 

Answer 1

Ich denke, Sie über die HTTP-Unterstützung von Angular2 der richtige Weg. Sehen Sie diese Arbeit plunkr: https://plnkr.co/edit/Y777Dup3VnxHjrGSbsr3?p=preview.

Vielleicht haben Sie vergessen, die Headers Klasse zu importieren. Ich habe diesen Fehler vor einiger Zeit gemacht und es gab keinen Fehler in der JavaScript-Konsole, aber die Header, die ich einstellen wollte, wurden nicht wirklich gesetzt. Zum Beispiel in Bezug auf die Header hatte ich text/plain anstelle von application/json. Sie können dies in der plunkr reproduzieren ich durch Kommentare Headers in den Importen zur Verfügung gestellt ...

Hier ist eine komplette Arbeitsprobe (Importe enthalten):

import {Component} from 'angular2/core'; 
import {Http,Headers} from 'angular2/http'; 
import 'rxjs/Rx'; 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div (click)="executeHttp()"> 
     Execute HTTP 
    </div> 
    ` 
}) 
export class AppComponent { 
    constructor(private http:Http) { 

    } 

    createAuthorizationHeader(headers:Headers) { 
    headers.append('Authorization', 'Basic ' + 
     btoa('a20e6aca-ee83-44bc-8033-b41f3078c2b6:c199f9c8-0548-4be79655-7ef7d7bf9d20')); 
    } 

    executeHttp() { 
    var headers = new Headers(); 
    this.createAuthorizationHeader(headers); 
    headers.append('Content-Type', 'application/json'); 

    var content = JSON.stringify({ 
     name: 'my name' 
    }); 

    return this.http.post(
     'https://angular2.apispark.net/v1/companies/', content, { 
     headers: headers 
     }).map(res => res.json()).subscribe(
     data => { console.log(data); }, 
     err => { console.log(err); } 
    ); 
    } 
} 

Hoffe, es hilft Ihnen, Thierry