Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

angular carrega com Json

Estou com um problema e gostaria da ajuda. Tenho um WS com dados de um fornecedor e estou tentando pegar os dados via Json e exibir na tela. O problema e o seguinte, onde faço a chamada do método que busca e insere o fornecedor para exibir na tela.

atualmente o código está assim:

Service com a conexão com WS (está conectando e retornando normalmente o Json)

@Injectable()
export class ApiService {

  private _apiURL = 'http://localhost:8085/fornecedor';
  constructor(private _http: HttpClient) { }

  public buscaJsonDaApiPorId(sufixo: string, id: number): Observable<any> {
    return this._http.get(`${this._apiURL}/${sufixo}/${id}`);
  }
}

Service com configuração do fornecedor e injeção dos dados

@Injectable()
export class FornecedorApiService {
  private _fornecedor: Fornecedor = new Fornecedor();

  public pegaFornecedorPorId(id: number): Fornecedor {
    this._apiService.buscaJsonDaApiPorId('fornecedor', id).
      subscribe(data => {
        this._fornecedor = <Fornecedor>data;
      });
    return this._fornecedor;
  }

}

appComponent para exibir

export class DadosFornecadorComponent implements DoCheck {
  private _fornecedor: Fornecedor = new Fornecedor();

  constructor(
    private _fornecedorService: FornecedorService,
    private _fornecedorApiService: FornecedorApiService,
  ) { }

  ngDoCheck() {
    if (this._fornecedor.id == null) {
      this._fornecedor = this._fornecedorApiService.getFornecedorPorId(1);
    }
  }

  public get fornecedor(): Fornecedor {
    return this._fornecedor;
  }
}

Acredito que o problema esteja em como eu estou montando-o AppComponent.

Tentei montar no 'ngOnint', no 'constructor' e toda as veze os dados não são exibidos na tela. Quando eu uso o (ngDoCheck()) ele exibe os dados na tela.

Pelo o que percebi ele tenta monta os dados várias vezes as 4 a 6 primeiras vezes o fornecedor fica como Undefined, até que dá tempo de o método completar e exibir os dados. mesmo assim toda vez que tem uma alteração click evento na tela ele chama o método 'ngDoCheck'

Pelas minhas pesquisas o problema e que como o angular trabalha de forma assíncrona ele carrega a tela antes do fornecedor receber os dados. como resolver isso ou como seria a forma correta de fazer? (Obs.: estou usando o angular 6)

1 resposta
solução!

Boa noite, Matheus! Como vai?

Não só o Angular trabalha de forma assíncrona e sim o JavaScript trabalha dessa forma! E sim, o problema é esse mesmo que vc falou!

Pra vc resolver isso da forma correta, basta que vc retorne o Observable do método pegaFornecedorPorId() da classe FornecedorApiService e tratar o subscribe() no componente que chamar esse serviço:

@Injectable()
export class FornecedorApiService {

  public pegaFornecedorPorId(id: number): Fornecedor {
    return this._apiService.buscaJsonDaApiPorId('fornecedor', id);
  }

}
export class DadosFornecadorComponent implements DoCheck {
  private _fornecedor: Fornecedor = new Fornecedor();

  constructor(
    private _fornecedorService: FornecedorService,
    private _fornecedorApiService: FornecedorApiService,
  ) { }

  ngOnInit() {
    if (this._fornecedor.id == null) {

      // é boa prática abrir um popup mostrando
      // um loading aqui.
      this._fornecedorApiService.getFornecedorPorId(1)
          .subscribe(data => {
              this._fornecedor = <Fornecedor>data;
              // aqui vc fecha o popup de loading.
          });;
    }
  }

  public get fornecedor(): Fornecedor {
    return this._fornecedor;
  }
}

Pegou a ideia? Qualquer coisa é só falar!

Grande abraço e bons estudos!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software