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)