Question

我正在使用Angular 5组件，该组件包括“ ngx-file-drop”和“ ngx-spinner”模块。通过我的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();
    }
  }

}

Answer 1

尝试下面的代码，然后再次检查：

 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();
}

}

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

1 个答案: