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

Question

我目前正在开发我的第一个 Ionic 2 应用程序，但我还不是很喜欢 typescript..

我想在构造函数中调用 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>

--> 文本区域为空

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}}