[Dúvida] Populando dados de interface na tela

Olá Renato, tudo bom?

Poderia compartilhar como você fez esse método para pegar os dados? E para você pegar dados de um backend deve se utulizar o método get, o método post é usado para registrar algo no backend.

Vamos resolver isso juntos.

Abraço.

Fala Diego, blz irmão ! Então, como se trata de um projeto empresarial, não posso compartilhar o código de fato, mas eu preciso usar o metodo post pois foi informado que todas as chamadas feitas tem que ser via post. Enfim, recaptulando, criei um serviço, passando um parâmetro que me retorna os dados (JSON) mapeados na inteface descrita a cima

SERVICE

export class DadosResumo {
  private readonly API = `${environment.api_server}/api/`;

  constructor(private http: HttpClient) {}

buscarDados(
    codigoContrato: number
  ): Observable<IResp<DadosResponse>> {
    return this.http.post<IResp<DadosResponse>>(
      `${this.API}op1234567v1`,
      {
        codigoContrato: codigoContrato
      }
    );

Verifiquei no meu console network e o response está OK, então no meu componente, criei uma variável e a tipei com a minha interface de retorno

retornaDados:  DadosResponse

após isso fiz a interpolação no meu componente HTML

{{ retornaDados.indicadorRetornoRecusaTitulo }}

e o erro *ERROR TypeError: ctx.retornaDados is undefined* é apresentado no console. Em conversa com outro amigo desenvolvedor ele comentou que já passou por isso e me mandou um artigo do Stack Overflow para me ajudar, mas, ainda, não consegui solucionar o problema

ERROR TypeError: ctx.retornaDados is undefined

Então Renato, como você está buscando dados de uma API você precisa necessariamente utilizar o método get, e no caso, ficaria mais ou menos assim:

buscarDados( codigoContrato: number ): Observable<IResp<DadosResponse>> {
    return this.http.get<IResp<DadosResponse>>(
      `${this.API}op1234567v1`,
      {
        codigoContrato: codigoContrato
      }
);

Acredito que isso seja um service, então no componente que você quer exibir as informações, você vai injetar este serviço e chamar o método, digamos que seja clicar num botão:

export class ListarPensamentoComponent  {

  infos[] = [];

  constructor(private dadosResumo: DadosResumo){}

  buscardados: (codigoContrato: number): Observable<IResp<DadosResponse>> {
      this.dadosResumo.buscarDados( codigoContrato ).subscribe( dados => {
          this.infos = dados;
      } )
  }
}

Se você quiser entender melhor, temos um curso com a instrutora Nayanne. onde ela mostra como construir um CRUD e trabalhar com dados de uma API. Dá uma olhada, vai te ajudar bastante.

Abraço e bons estudos.

Fala Renato, eu acabei esquecendo de deixar o link do curso.

Angular 14: aplique os conceitos e desenvolva seu primeiro CRUD.

Vai te ajudar bastante, principalmente na aula de comunicação com backend.

Abraço.

Valeu Diego, muito obrigado pelo o apoio. Por se tratar de um problema no trabalho foi escalado e resolvido, mas fico muito grato pela a ajuda.