在HTTP Post请求之后，Angular 5必须单击以继续

我正在开发Angular 5组件，其中包括“ngx文件放置”和“ngx微调器”模块。 通过my API上传文件后会出现此问题。 该文件已正确上载，并且在我的订阅功能中，它正确显示了console.log行，但没有显示其他行，因此我必须单击屏幕继续

在下面的代码中，我尝试添加一个eventEmitter来处理上传的和。它被正确触发，但“this.spinner.hide（）和this.entryFile=null”在我单击屏幕之前不会执行

import { Component, OnInit, EventEmitter } from '@angular/core';
import { FileSystemDirectoryEntry, UploadFile, FileSystemFileEntry, UploadEvent } from 'ngx-file-drop';
import { TranslateService } from '@ngx-translate/core';
import {NgxSpinnerService} from 'ngx-spinner';
import { HttpClient } from '@angular/common/http';
import { ConfirmSavedModalContent } from '../../../shared/form/confirm-saved-modal.content';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
  templateUrl: './import.component.html'
})
export class PoiImportComponent implements OnInit {
  resourceUrl = 'api/files/upload';
  public fileEntry: UploadFile;
  public wrongFileType:boolean;
  public finishReceiver = new EventEmitter();
  constructor( 
    private http: HttpClient,
    private modalService: NgbModal,
    public spinner : NgxSpinnerService,
    private translate: TranslateService) {
    var lang = window.sessionStorage.getItem("LANG");
    if (lang !== undefined && lang !== null){
        translate.setDefaultLang(lang);
    }
    else{
        translate.setDefaultLang('en');
    }
   }

  ngOnInit() {
    //receives the end of the file upload.
    this.finishReceiver.subscribe(resolve=>{
      this.spinner.hide();
      this.fileEntry = null;
    });

  }



  public dropped(event: UploadEvent) {

    //Get file dropped
    var tmp = event.files[0];

    //Split name to get extention
    var name = tmp.relativePath.split(".");

    //Check if the extension is right
    this.wrongFileType = (name[1] !== "csv");
    if (!this.wrongFileType){
      this.fileEntry = tmp;
    }
  }

  //Show alert of wrong file extension
  public fileLeave(event){
   this.wrongFileType = false;
  }

  clearFile(){
    this.fileEntry = null;
    this.hideAlert();
  }

  hideAlert(){
    this.wrongFileType = false;
  }

  uploadFile(){

    //check if the entry is a valid file
    if (this.fileEntry.fileEntry.isFile){

      //Cast entry to file System
      const upload = this.fileEntry.fileEntry as FileSystemFileEntry;

      //Show loading spinner
      this.spinner.show();

      //Get the file from dropped data
      upload.file((file:File)=>{

        //Create formData from the file dropped
        let input = new FormData();
        input.append('name',file.name);
        input.append('file', file);
        this.http.post<File>(this.resourceUrl, input).subscribe(resolve =>{
          //Send finish upload emit
          this.finishReceiver.emit(resolve);
        });
      });
    }else{
      this.spinner.hide();
    }
  }

}

从'@angular/core'导入{Component，OnInit，EventEmitter}；
从'ngx file drop'导入{FileSystemDirectoryEntry，UploadFile，FileSystemFileEntry，UploadEvent}；
从'@ngx translate/core'导入{TranslateService}；
从“ngx微调器”导入{NgxSpinnerService}；
从'@angular/common/http'导入{HttpClient}；
从“../../../shared/form/confirm saved model.content”导入{ConfirmSavedModalContent}；
从'@ng bootstrap/ng bootstrap'导入{NgbModal}；
@组成部分({
templateUrl:“./import.component.html”
})
导出类POIMPORTCOMPONT实现OnInit{
resourceUrl='api/files/upload'；
公共文件条目：上传文件；
公共文件类型：布尔型；
public finishReceiver=new EventEmitter（）；
建造商（
私有http:HttpClient，
专用modalService:NgbModal，
公共微调器：NgxSpinnerService，
私人翻译（翻译服务）{
var lang=window.sessionStorage.getItem（“lang”）；
if（lang！==未定义&&lang！==空）{
translate.setDefaultLang（lang）；
}
否则{
translate.setDefaultLang（'en'）；
}
}
恩戈尼尼特（）{
//接收文件上载的结束。
this.finishReceiver.subscribe（解析=>{
this.spinner.hide（）；
this.fileEntry=null；
});
}
公共已删除（事件：UploadEvent）{
//删除文件
var tmp=event.files[0]；
//拆分名称以获取扩展名
变量名称=tmp.relativePath.split（“.”）；
//检查分机是否正确
this.ErrorFileType=（名称[1]！=“csv”）；
如果（！this.ErrorFileType）{
this.fileEntry=tmp；
}
}
//显示错误文件扩展名的警报
公众假期（活动）{
this.ErrorFileType=false；
}
clearFile（）{
this.fileEntry=null；
这个。hideAlert（）；
}
希德勒特（）{
this.ErrorFileType=false；
}
上传文件（）{
//检查条目是否为有效文件
if（this.fileEntry.fileEntry.isFile）{
//向文件系统强制转换条目
const upload=this.fileEntry.fileEntry作为FileSystemFileEntry；
//显示加载微调器
this.spinner.show（）；
//从删除的数据中获取文件
upload.file（（文件：file）=>{
//从删除的文件创建formData
让输入=新FormData（）；
input.append（'name'，file.name）；
input.append（'file'，file）；
this.http.post（this.resourceUrl，input）.subscribe（resolve=>{
//发送完成上传发送
this.finishReceiver.emit（解析）；
});
});
}否则{
this.spinner.hide（）；
}
}
}

尝试以下代码并再次检查：

 uploadFile(){
    $mainRef = this.
    //check if the entry is a valid file
    if (this.fileEntry.fileEntry.isFile){

      //Cast entry to file System
      const upload = this.fileEntry.fileEntry as FileSystemFileEntry;

      //Show loading spinner
      this.spinner.show();

      //Get the file from dropped data
      upload.file((file:File)=>{
    //Create formData from the file dropped
    let input = new FormData();
    input.append('name',file.name);
    input.append('file', file);
    this.http.post<File>(this.resourceUrl, input).subscribe(resolve =>{
      //Send finish upload emit
      $mainRef.finishReceiver.emit(resolve);
    });
  });
}else{
  this.spinner.hide();
}

uploadFile（）{
$mainRef=这个。
//检查条目是否为有效文件
if（this.fileEntry.fileEntry.isFile）{
//向文件系统强制转换条目
const upload=this.fileEntry.fileEntry作为FileSystemFileEntry；
//显示加载微调器
this.spinner.show（）；
//从删除的数据中获取文件
upload.file（（文件：file）=>{
//从删除的文件创建formData
让输入=新FormData（）；
input.append（'name'，file.name）；
input.append（'file'，file）；
this.http.post（this.resourceUrl，input）.subscribe（resolve=>{
//发送完成上传发送
$mainRef.finishReceiver.emit（解析）；
});
});
}否则{
this.spinner.hide（）；
}

---

}

尝试这样做，事件被发出，我接收它，根据调试器执行this.spinner.hide（）和this.fileEntry=null。但是在界面上什么都没有发生，微调器没有消失。我认为还有其他问题。尝试替换$mainRef.finishReceiver.emit（resolve）；使用$mainRef.spinner.hide（）$mainRef.fileEntry=null；在上载函数中。也尝试过，只执行console.log指令。我不明白为什么你可以为你的应用创建stackblitz，这样我可以更好地了解它。你需要什么部分，因为我的应用非常大，我无法为它创建项目