Angular2和xhr EventListener

Question

如何訪問addEventListener函數內的HTML元素？或者我可以在此函數內設置組件屬性的值嗎？我想爲上傳文件取得進展百分比。

sample.component.ts：

import {Component} from '@angular/core'; 
@Component({ 
selector: 'Account-Management', 
templateUrl: 'AddUser.template.html', 
}) 
export class AddUserComponent { 
host: string = "http://" + window.location.hostname + (location.port ? ':' + location.port : ''); 
URL = this.host + '/api/apiUser/Upload'; 

upload() { 
    this.makeFileRequest(this.URL, [], this.filesToUpload).then((result) => { 
     console.log(result); 
    }, (error) => { 
     console.error(error); 
    }); 
} 

fileChangeEvent(fileInput: any) { 
    this.filesToUpload = <Array<File>>fileInput.target.files; 
} 
percent = "0"; 
makeFileRequest(url: string, params: Array<string>, files: Array<File>) { 
    var i = 1; 

    return new Promise((resolve, reject) => { 
     var formData: any = new FormData(); 
     var xhr = new XMLHttpRequest(); 
     for (var i = 0; i < files.length; i++) { 
      formData.append("uploads[]", files[i], files[i].name); 
     } 
    xhr.upload.addEventListener("progress", this.progressFunction, false); 
     xhr.onreadystatechange = function() { 
      if (xhr.readyState == 4) { 
       if (xhr.status == 200) { 
        resolve(JSON.parse(xhr.response)); 
       } else { 
        reject(xhr.response); 
       } 
      } 
     } 
     xhr.open("POST", url, true); 
     xhr.send(formData); 
    }); 
} 

progressFunction(evt, d) { 

    if (evt.lengthComputable) { 
//percent changed but I couldn't see change in html. 
     this.percent = Math.round(evt.loaded/evt.total * 100) + "%"; 
//log works correctly. 
     console.log("PERCENT : ", this.percent); 
//log works correctly. 
     console.log(Math.round(evt.loaded/evt.total * 100) + "%"); 
    } 
} 

AddUser.template.html：

   <div class="form-group"> 
        <input type="file" (change)="fileChangeEvent($event)" placeholder="Upload file..." /> 
        <button type="button" (click)="upload()">Upload</button> 
        <span>{{percent}}</span> 

       </div> 

Answer 1

你失去上下文。嘗試使用箭頭功能是這樣的：

xhr.upload.addEventListener("progress", (evt) => this.progressFunction(evt), false); 

參見https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions