Início / coding / Perguntas / 79334003
Accepted
Sophonias
Asked: 2025-01-07 02:37:47 +0800 CST

Angular Http Client Call não está retornando valor ao componente, mas mostra resposta na guia de rede do navegador

  • 772

Tenho um componente que renderiza uma visualização de mapa. Os dados do mapa são obtidos da chamada de serviço de backend. Tentei fazer o live debug nas ferramentas de desenvolvimento do navegador. Ele chega à chamada de serviço e parece pular a chamada de serviço. Mas quando eu verifico o tráfego de rede, a chamada de serviço retorna valores e é bem-sucedida. Acho que o componente está carregando antes que a chamada de serviço seja concluída.

é assim que o componente init se parece

ngOnInit(): void {
    this.myService.getData().subscribe(
        (result) => {
            this.data = result.body;
        }, 
        (result: HttpErrorResponse) = {
            console.log(result.error);
        }
    );
    this.loadMap();
}

Durante a execução, ele passa pela chamada de serviço e carrega o mapa. 'this.data' aparece vazio. Tentei adicionar uma condição em torno de this.loadMap() para garantir que há dados, mas isso apenas interrompe a renderização. O componente não parece esperar a conclusão da chamada de serviço. Tentei usar *ngIf para verificar os resultados antes do componente carregar e isso não ajudou. Como posso carregar this.data antes que o componente seja renderizado?

angular

1 respostas

  1. Best Answer

    Se entendi corretamente, você tem que esperar pela resposta da chamada da API /getData()/ e só então chamar a renderização /this.loadMap()/.

    Você deve definir a variável this.data em um operador tap e chamar o método load na assinatura.

    this.myService.getData().pipe(tap((result)=> {
    if(result instanceof HttpErrorResponse)  {
      console.log(result.error);
    }
    this.data = result.body;
})).subscribe(()=> {
  this.loadMap();
});
    • 1

relate perguntas