phpスクリプトに投稿できません角度2

Question

私は必要なデータを含むPHPスクリプトへの投稿要求を使用しようとしています。私DbServiceからngOnInitgetTrips()機能で

home.component.ts

import { Component, OnInit } from '@angular/core'; 
import { UserComment } from '../definition/user.comment'; 
import { HomeService } from '../services/home.service'; 
import { DbService } from '../services/db.service'; 
import { Trip } from '../definition/trip'; 

@Component({ 
    templateUrl: './templates/home.html', 
    providers: [HomeService, DbService] 
}) 
export class HomeComponent implements OnInit { 

    user_comments: UserComment[]; 
    trips: Trip[]; 

    constructor(private homeService: HomeService, private dbService: DbService) { } 

    getUserComments(): void { 
     this.homeService.getData().then(user_comments => this.user_comments = user_comments); 
    } 
    ngOnInit(): void { 
     this.getUserComments(); 
     console.log(this.dbService.getTrips('test').subscribe()); 
    } 
} 

は、次のようになりますこれは、呼び出されます。

import { Injectable }        from '@angular/core'; 
import { Http, Response, Headers, RequestOptions} from '@angular/http'; 
import { Trip }         from '../definition/trip'; 
import { Observable }        from 'rxjs/Rx'; 

import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/catch'; 

@Injectable() 
export class DbService { 

    constructor (private http: Http) {} 

    private dbUrl = '../apis/db_api.php'; // URL to web API 

    getTrips(name): Observable<Response> { 
     let headers = new Headers({'Content-Type': 'application/json'}); 
     let options = new RequestOptions({headers: headers}); 
     let body = JSON.stringify(name); 
     return this.http.post(this.dbUrl, body, options).map((res: Response) => res.json()); 
    } 
} 

私が行うとこれは、私がコンソールに

を次のエラーを取得していること。これは、プロジェクト構造

だろうPHPファイル

<?php 
header("Access-Control-Allow-Origin:*"); 
header('Access-Control-Allow-Headers: X-Requested-With'); 
header('Content-Type: application/json'); 
$data = array(
    'id' => 1, 
    'user_id' => 1, 
    'route_name' => 'test', 
    'route_info' => 'test info', 
    'rating' => 2.5, 
    'coordinates' => '9838e901', 
    'is_active' => 1, 
    'deleted_at' => NULL 
); 

echo json_encode($data); 
?> 

だろう

私はポストをgetに変更すると、私はPHPファイルのJSON文字列を取得します。

アイデアは、ローカルデータベースと通信してデータを返すphpファイルを持つことですが、今はphpファイルにデータをハードコードしています。

はあなたのコードの問題はあなたがあなたの場合は、システムでのApache WebサーバーとPHPをインストールする必要がurl.first相対でthis.http.post呼び出しているで助けに

よろしく

Answer 1

をお願い申し上げますローカルで実行したいあなたの完全なプロジェクトは、私たちのPHPプロジェクトのようにApacheウェブディレクトリの下にあるべきです。

private dbUrl = '../apis/db_api.php'; // URL to web API 

プライベートdbUrlが間違っています。 phpファイルはサーバー側でのみ動作します。 localhostの後ろにファイルの場所の完全なアドレスがあるはずです。このように

URLにlocalhostを追加し、db_apiファイルの場所を指定します。あなたがコードをいくつかのサーバにアップロードした場合は、localhostの代わりにそのアドレスを使用してください。あなたはサーバーに行くべきhttp要求を呼び出しています。

したがって、dbUrlはプライベートdbUrl = 'http://localhost:3000/tripahead/apis/db_api.php'のようにする必要があります。

@Injectable() 
export class DbService { 

    constructor (private http: Http) {} 

    private dbUrl = 'http://localhost:3000/tripahead/apis/db_api.php'; <-- location of your server php file location. 

    getTrips(name): Observable<Response> { 
     let headers = new Headers({'Content-Type': 'application/json'}); 
     let options = new RequestOptions({headers: headers}); 
     let body = JSON.stringify(name); 
     return this.http.post(this.dbUrl, body, options).map((res: Response) => res.json()); 
    } 
}