首页 文章

Angular 5必须在HTTP Post请求后单击才能继续

提问于
浏览
0

我正在开发一个包含“ngx-file-drop”和“ngx-spinner”模块的Angular 5组件 . 通过我的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();
    }
  }

}

1 回答

  • 0

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

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

    }

相关问题