如何將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}}