JavaScript 使用 Angular 2 在 xhr 函数外部获取变量

Question

我试图获取在构造函数之前初始化的变量。例如

title: String = 'hello'

从函数中获取它(这有效)

functionname () {
    //this will work
    console.log(this.title)
}

但是从我的原始代码来看，我试图从 XHR 的 onload 函数获取它，但无法访问它。

export class UploadComponent implements OnInit {
  description: string;
  title: string;

  constructor() {
  }

  ngOnInit() {
  }

  upload() {
    this.makeFileRequest("/api/upload_video", []).then((result) => {
      console.log(result);
    }, (error) => {
      console.error(error);
    });
  }

  makeFileRequest(url: string, params: Array<string>) {
    return new Promise((resolve, reject) => {
      var formData: any = new FormData();
      var xhr = new XMLHttpRequest();

      xhr.open("POST", url, true);
      xhr.responseType = 'text';

      xhr.onload = function () {
        if (xhr.readyState === xhr.DONE) {
          //trying to get this.title
          console.log(this.title)
        }
      };
      xhr.send(formData);
    });
  }
}

错误

'Error' message: 'Property 'title' does not exist on type XMLHttpRequestEventTarget'.'

访问 this.title 时我缺少什么

Answer 1

这会起作用

 makeFileRequest(url: string, params: Array<string>) {
return new Promise((resolve, reject) => {
  var formData: any = new FormData();
  var xhr = new XMLHttpRequest();
  var that = this;

  xhr.open("POST", url, true);
  xhr.responseType = 'text';

  xhr.onload = function () {
    if (xhr.readyState === xhr.DONE) {
      //trying to get this.title
      console.log(that.title)
    }
  };
  xhr.send(formData);
 });
}
}