Angular2变量在更改后未更新

Question

我正在尝试构建一个组件，用户输入一个图像然后上传到s3，然后显示该图像的URL。我有以下html模板

{{imgUrls}}
<div>
      <input type="file" (change)="testOnChange($event)"/>
</div>

它连接到包含以下打字稿代码的组件

    public imgUrls = [];

    testOnChange(event){
        var files = event.srcElement.files;
        this.getSignedRequest(files[0]);
    }

    uploadFile(file, signedRequest, url){
        console.log("inside uploadFile()");

        const xhr = new XMLHttpRequest();
        xhr.open('PUT', signedRequest);
        xhr.onreadystatechange = () => {
            if(xhr.readyState === 4){
                if(xhr.status === 200){
                    this.imgUrls.push(url);
                    console.log(this.imgUrls);
                }
                else{
                    alert('Could not upload file.');
                }
            }
        };
        xhr.send(file);
    }

    getSignedRequest(file){
        console.log("inside getSignedRequest()");
        const xhr = new XMLHttpRequest();
        xhr.open('GET', `http://localhost:3000/job/sign-s3?file-name=${file.name}&file-type=${file.type}`);
        xhr.onreadystatechange = () => {
            if(xhr.readyState === 4){
                if(xhr.status === 200){
                    const response = JSON.parse(xhr.responseText);
                    this.uploadFile(file, response.signedRequest, response.url);
                }
                else{
                    alert('Could not get signed URL.');
                }
            }
        };
        xhr.send();
    }

uploadFile()中的日志记录语句实际上显示了包含正确url的更新的imgUrls变量 - 但是{{imgUrls}}实际上从未在html模板中实际更改。我不确定为什么日志语句显示imgUrls已经改变但是改变从未反映在实际的html模板中。我以某种方式错误地绑定变量？

Answer 1

Angular有一个名为BrowserXhr的XmlHttpRequest包装器，你应该在angular中使用Http服务。即：

constructor(private _http: Http){  
    _http.get(url); // etc
}