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

Question

我目前正在开发我的第一个Ionic 2应用程序，但我还不太喜欢打字稿。

我想在我的构造函数中调用authenticate（）方法，之后调用

1. 将整个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>

- > textarea是空的

Answer 1

您可能希望提取数组内部的对象，该对象位于Person ：

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

此外，您需要将数据分配给this.data如下所示：

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

然后使用（连同安全导航操作员 ?在这里。）

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