Question

我目前正在使用 ng2-uploader ，并且在我上传文件时遇到严重问题，它会触发两次（onUpload）：

的index.html

  <input [ng-file-select]="options"(onUpload)="handleUpload($event)" type="file" >

index.conroller

handleUpload(data): void {
    console.log("on file");//console always shows twice

    if (data && data.response)
    {
      data = JSON.parse(data.response);
      this.uploadFile = data;
      this.editdata.file = this.uploadFile.filename;
      console.log('firing event->'+this.fireOnce);


  }

我不知道为什么在上传文件后调用两次此函数会触发两次，但它应该正常触发一次

Answer 1

点击它可能会触发多个事件。例如，它可能正在触发点击事件和更改事件。

如果你console.log(data)它可能会揭示被触发事件的类型。

如果我是对的，你可以这样做：

if (data.eventType === "click") {
    // your code
}

显然这段代码的语法错了，但你明白了！

PS有一些有用的设施可以观察正在发射的事件。

例如，在Firefox中，如果执行：

monitorEvents($("input")[0]);

在你的控制台中，它会显示所有被触发的事件，这对于调试这样的事情非常有用。

或者，如果所有其他方法都失败了，您可以对事件进行去抖动，这样如果在上一次调用的一秒钟内调用事件处理函数，就不能再次调用它。

Answer 2

在查看所有来源时我没有找到任何解决方案我刚刚修复了，这是我的固定代码一次解雇：

fireOnce:Number; 
     constructor(){
         this.fireOnce=0;//initialized
               } 
     handleUpload(data): void {

           //the fucntion will still called twice but this condition will execute
 once so you can do your work in this if block 
      if(this.fireOnce==0)//ensuring this block to execute once 
     {
        //do your stuff here

            if (data && data.response)
             {
                data = JSON.parse(data.response);
                this.uploadFile = data;
                console.log('firing event->'+this.fireOnce);
           }
      }

      if(this.fireOnce==0)
      {
       //once fired never excute the above if block twice
        this.fireOnce=1;
      }
     }

  }

它只是一个骗子而不是确切的解决方案Hope angular 2团队将很快解决这个问题

Angular 2 ng2-uploader onUpload函数触发两次

2 个答案: