アングル4 http.postが送信または動作していません

Question

私はAngularの最新バージョンにはかなり新しいです。 http.postは私のアプリケーションのどこでも動作していないようです。私は、ブラウザでこれを実行すると、それはある

this.http 
    .post(this.bikesUrl, data, { headers: this.headers }) 
    .toPromise() 
    .then(res => res.json().data) 
    .catch(this.handleError); 

...か...

this.http.post(this.config.apiEndpoint+'/authenticate', JSON.stringify({ username: username, password: password })) 
     .map((response: Response) => { 
      // login successful if there's a jwt token in the response 
      let token = response.json() && response.json().token; 
      if (token) { 
       // set token property 
       this.token = token; 

       // store username and jwt token in local storage to keep user logged in between page refreshes 
       localStorage.setItem('currentUser', JSON.stringify({ username: username, token: token })); 

       // return true to indicate successful login 
       return true; 
      } else { 
       // return false to indicate failed login 
       return false; 
      } 
     }).subscribe(result => { 
     if (result === true) { 
     // login successful 
     this.router.navigate(['/']); 
     } else { 
     // login failed 
     this.error = 'Username or password is incorrect'; 
     this.loading = false; 
     } 
    }) 

...か...

var json = {var1: 'test'}; 
var params = 'json='+json; 
let headers = new Headers(); 
headers.append('Content-Type', 'application/json'); 
http.post("http://example.com/infoarray.php", params, headers).subscribe (re => { 
    console.log(re) 
}) 

：私はのようなものを試してみましたスクリプトのようなものはほとんどありません。私は検査官の要求はないと思う。私は角度CLIを使用しています

Answer 1

私の間違い。私はすべての要求に影響を与えているテストのための偽のバックエンドスクリプトを含むチュートリアルに従っています。

誰かが同じ問題を抱えている場合や、このチュートリアルに従っている場合は、 http://jasonwatmore.com/post/2016/08/16/angular-2-jwt-authentication-example-tutorial偽のバックエンドを無効にしてください。

私は単にこれらのプロバイダを削除しました。

import { fakeBackendProvider } from './_helpers/fake-backend'; 
import { MockBackend, MockConnection } from '@angular/http/testing'; 
import { BaseRequestOptions } from '@angular/http'; 

Answer 2

これは私が私のイオン3アプリでやっている方法です。

//in my ApiProvider 

let headers = new Headers({ 'Content-Type': 'application/json' }); 
let options = new RequestOptions({ headers: headers }); 

http.post("http://localhost/login", params, options) 
    .map(this.onLoginSuccess) 
    .catch(this.onError); 

onLoginSuccess(res: Response): Observable<LoginUserResponse> { 
return res.json(); 
} 

private onError(error: Response | any) { 
    console.error(error.message || error); 
    return Observable.throw(error.message || error); 
} 

Answer 3

あなたのhttpは正しくインスタンス化されていますか？法の下にしてくださいしてみてください、それは確かに動作します：

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

@Injectable() 
export class MyService { 
    constructor(private http: Http) {} 

    // Post 
    MyPost() { 
     this.http.post(.....); 
     } 
    } 

それでも動作しない場合は、あなたのデータは、すべてが有効な... this.config、ユーザ名、パスワードのように、エラーの可能性がありますか？

Answer 4

他の間違いは@ angular/httpからヘッダーをインポートすることです。エラーは発生しませんが、要求は機能しません。ヘッダーをインポートしてみてください import {Headers, Http} from '@angular/http';