Angular2 FileTransfer.upload 响应未在视图中更新

Question

下面是我的代码。 sendFile 函数工作正常，我可以在 win 函数中将结果记录到控制台，但变量不会在视图中更新。

constructor(zone:NgZone) {
  this.res = [];
  this.zone = new NgZone({enableLongStackTrace: false});
}

win(r) {
  this.zone.run(() => {
    var temp = JSON.parse(r.response)
    temp = temp.ParsedResults[0].ParsedText
    temp = temp.split('\n');

    //this var is not updated in the view

    this.res = temp

    //this works fine

     console.log(temp);

  });
}


sendFile(imageURI){
  var file = new FileUploadOptions();
  file.fileKey="file";
  file.fileName=imageURI.substr(imageURI.lastIndexOf('/')+1)+'.jpg';
  file.mimeType="text/plain";

  var params = new Object();
  params.apikey = "helloworld";
  file.params = params;

  var ft = new FileTransfer();

win 函数似乎无法访问 this.res

  ft.upload(imageURI, encodeURI("https://myserver"), this.win, this.fail, file);
}

scanImage(){
  let options = {
    quality: 100,
    destinationType: Camera.DestinationType.FILE_URI,//DATA_URL,
    sourceType: Camera.PictureSourceType.CAMERA,
    encodingType: Camera.EncodingType.JPEG,
    saveToPhotoAlbum: true,
    allowEdit: true,
    targetHeight: 1000,
    correctOrientation: true
  };

navigator.camera.getPicture(
  (imageURI) => {
    this.zone.run(() => {

视图中的 img 更新

      this.imageSrc = imageURI;
      this.sendFile(imageURI);
    });
  },

  (error) => {
    console.log('error');
  }, options

);
}

Answer 1

引用时需要绑定函数：

ft.upload(imageURI, encodeURI("https://myserver"),
          this.win.bind(this), this.fail.bind(this), file);

否则您在这些函数中使用的 this 将不会对应于组件本身的实例。所以在 win 方法中使用 this.res 这种方式不会更新组件的 res 属性...

还有一点。为什么要手动实例化 NgZone 而不是使用注入的实例？

constructor(private zone:NgZone) {
  this.res = [];
}

win(r) {
  this.zone.run(() => {
    (...)
  });
}

Angular2 FileTransfer.upload 响应未在视图中更新

Angular2 FileTransfer.upload response not updating in view

angularjs

angular2-template

angular