1

Estou com um problema em meu código. Estou usando angular 7, nele estou tendo dificuldades em uma tela que importo um arquivo.

Estou querendo executar um "spinner" que será mostrado quando clico em "enviar", ele executa o Spinner, porém, quando para de executar a função que esta no meu alert era para limpar os dados que estão no input e setar na variável "loading" (variável que mostra o spinner) o valor booleano "false", porem isso não acontece.

No log mostra que a variável "loading" recebe o "false" dentro do subscribe(), mas na tela ainda continua como true até que eu passe o cursor do mouse por cima do menu ao lado.

import { HttpClient, HttpEventType } from '@angular/common/http';
import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from "@angular/forms";
import {ApiTenantService} from '../../../../core/_base/crud/utils/apitenant.service';
import { Observable } from 'rxjs';



@Component({
  selector: 'kt-coeficientes',
  templateUrl: './coeficientes.component.html',
  styleUrls: ['./coeficientes.component.scss']
})



export class CoeficientesComponent implements OnInit {
  
  form: FormGroup;
  loading: boolean = false;
  public baseUrl = 'coefficients';

  @ViewChild('fileInput') fileInput: ElementRef;

  constructor(private fb: FormBuilder, private api: ApiTenantService) {
      this.createForm();
  }

  ngOnInit() {

  }

  createForm() {
      this.form = this.fb.group({
          coefficientFile: ['', Validators.required],
      });
  }

  
  onFileChange(event) {
      console.log('onFileChange', event);
      if (event.target.files.length > 0) {
          let file = event.target.files[0];
          this.form.get('coefficientFile').setValue(file);
          console.log('onFileChange dentro do if', event);
      }
      console.log('onFileChange depois do if', event);
  }

  private prepareSave(): any {
      let input = new FormData();
      input.append('coefficientFile', this.form.get('coefficientFile').value);
      return input;
  }

  onSubmit() {
      const formModel = this.prepareSave();
      this.loading = true;
      console.log('loading fora 1', this.loading);
    
      this.sendFile(formModel).subscribe(res => {

          console.log('onSubmit', res);
          
          this.loading = false;
          this.clearFile();
          alert('done!');
          console.log('loading subscribe', this.loading);

      
    });

      console.log('loading fora', this.loading);
  }

  clearFile() {
      this.form.get('coefficientFile').setValue(null);
      this.fileInput.nativeElement.value = '';
      this.loading = false;
     
      
  }

  sendFile(fileToUpload: File): Observable<boolean> {
      return this.api.post(this.baseUrl + '/file', fileToUpload);
  }
  

}
{{(loading)}}
<div class="kt-portlet">
    <div class="kt-portlet__head">
        <div class="kt-portlet__head-caption">
            <div class="kt-portlet__head-title">
                <span class="kt-portlet__head-icon kt-hide">
                    <i class="la la-gear"></i>
                </span>
                <h3 class="kt-portlet__head-text "><i class="fas fa-file-upload"></i>Coeficientes</h3>
            </div>
        </div>
    </div>
    <div class="kt-portlet__body">
        <div class="container">
            <div class="row">
                <div class="col-lg-4">
                    <div class="form-group">
                        <input type="file" id="coefficientFile" (change)="onFileChange($event)" #fileInput>
                        <div *ngIf="loading">
                            <i class="fa fa-spinner fa-spin" aria-hidden="true"></i>
                          </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-12">
                <button mat-raised-button type="submit" color="primary" (click)="onSubmit()" [disabled]="form.invalid || loading">Enviar</button>&nbsp;
                <button mat-raised-button type="submit" (click)="clearFile()">Limpar</button>
            </div>
      
        </div>
    </div>

</div>
      

4
  • Mas pela sua logica ele so vai ser false dentro do subscribe mesmo 5/06/2019 às 17:07
  • Tentei executar isso fora também, com outras funções, com settimeout, mas nada deu certo. Teria alguma opção que eu posso tentar? 5/06/2019 às 17:33
  • No fora ele não vai existir por que é assincrono, tem outras respostas no site explicando assincronicidade 5/06/2019 às 17:45
  • mas entao, ele ta setando a variavel como "false", no log aparece ela como "false", mas na tela só executa isso quando eu passo o mouse para o menu do lado 6/06/2019 às 12:16

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .