如何将HTTP JSON响应转换为HTML（Ionic2，Angular2，TypeScript，PHP，JSON）？

Question

我目前的工作对我的第一离子2的应用程序，但我还没有很成打字稿..

我想调用authenticate（）方法在我的构造函数和事后

1. GET整个JSON响应到textarea的 和/或
2. 访问我的HTML 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像这样：（连同safe navigation operator?这里）

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

然后使用

{{data?.Username}}和{{data?.Password}}