HTML（Ionic2、Angular2、TypeScript、PHP、JSON）にHTTP JSONレスポンスを取得する方法は？

Question

私は現在、私の最初のイオン2アプリに取り組んでいますが、私は非常に多くのtypescriptですにまだないです..

私は私のコンストラクタでのauthenticate（）メソッドを呼び出したいとその後に

1. GET私のHTML内のtextarea および/または
2. アクセスに全体JSONレスポンスJSONレスポンスのユーザー名とパスワード値

活字体：

export class WelcomePage { 
    public data: string; 
    username: string; 
    password: string; 

    constructor(public navCtrl: NavController, public http: Http) { 
     this.authenticate(); 
    }  

    authenticate() { 
      var creds = { username: 'user1', password: 'pw1' }; 

      var headers = new Headers(); 
      headers.append('Content-Type', 'application/x-www-form-urlencoded'); 

      this.http.post('http://www.xyz.api.php', creds, { 
       headers: headers 
      }) 
       .map(res => res.json()) 

       .subscribe(
       data => this.data, 
       err => this.logError(err), 
       () => console.log('Completed') 
       ); 
     } 
} 

私はすでにAPIから得た回答：

{ "Person":[ {"Username":"user1","Password":"pw1"} ] } 

HTML：

<textarea>here: {{data}}</textarea> 

- >テキストエリアが空

Answer 1

であるあなたは、内側にあるオブジェクトを抽出したいです内部にある配列Person：

.map(res => res.json().Person[0]) // extract object 

さらに、あなたがそうのようthis.dataにデータを割り当てる必要があります。

.subscribe(
    data => this.data = data // here! 
    .... 

そして、（一緒にここsafe navigation operator?で。）を使用

{{data?.Username}}と{{data?.Password}}