Ionic2 angular2 http外部アプリからjsonを取得

Question

これは私がより複雑なものを見たので、これはnoobの質問かもしれないことを知っていますが、複雑なことを理解するにはまず簡単なことを理解する必要があります。

私は（laravel）APIからJSON文字列から名前を取得しようとしています：

{"name":"Abigail","state":"CA"} 

コードは、この（laravelに）返しルートに作成されます。

return response()->json([ 
    'name' => 'Abigail', 
    'state' => 'CA' 
]); 

page.ts：

export class Page { 
    constructor(public http: Http) {} 
    getJson() { 
     this.http.get('http://external.ip/api') 
      .map(res => res.json()) 
      .subscribe(
      data => this.data = data 
    ); 
    } 
} 

0イオンで

私は、これらのファイルを得ました

page.html：

<ion-header> 
    <ion-navbar> 
    <ion-title>App</ion-title> 
    </ion-navbar> 
</ion-header> 
<ion-content padding> 
    <ion-content> 
    <ion-list> 
     <ion-item> 
     <h3>{{data.name}}<h3> 
     </ion-item> 
    </ion-list> 
    </ion-content> 
</ion-content> 

私は、これは動作しません知っているが、私はこの作業を取得するのに役立つ必要があります。 後ほど名前を追加したいと思っています。 その後、私はapiにデータを投稿することができます（例えば、名前を追加したり、日付を変更するなど）。

Answer 1

これは、何かがgetJson（）を実行すると仮定して動作するはずです（これを行うためにOnInitコードを追加しました）。 yaの簡単な投稿要求の簡単な例をあげました。あなたはその投稿を購読することも、そのままにすることもできます。

//Will need on OnInit to run getJson() 
    import {Component, OnInit} from '@angular/core'; 


export class Page implements OnInit { 

    constructor(public http: Http) {} 

data: any; 

    getJson() { 
     this.http.get('http://external.ip/api') 
      .map(res => res.json()) 
      .subscribe(
      data => this.data = data; 
    ); 
    } 
//run getJson() at initial load 
ngOnInit() { 
this.getJson(); 
} 
    postJson(data:any) { 
    let headers = new Headers({ 'Content-Type': 'application/json'}); 
    let options = new RequestOptions({ headers: headers }); 
    return this.http.post('http://52.11.14.57:4000/api/events', JSON.stringify(data), options) 
     .map((res: Response) => res.json()); 
    } 
     } 
    }