Duvida ao apresentar dados de forma de Objeto no Front

Primeirão, temos que entender a parada do objeto que a API tá mandando. Tipo, olhando o JSON, tem várias propriedades lá. Por exemplo, "localidade" tem umas subparadas como "codigo", "nome-localidade" e "sigla-uf". E o mesmo esquema com "unidade-destacamento" e "unidade-lotacao". Então, bora dar um trato nessas subparadas.

Atualização do Método getsolicitarAgente:

Vamos ajustar o método pra lidar certinho com o objeto. Joguei umas ideias no código pra tu sacar como fazer:

getsolicitarAgente(): void {
  this.restApi.getsolicitarAgente(this.form.get('matricula').value).subscribe(resp => {
    const agente: Agente = resp as Agente; // Só garante que Agente seja o tipo certo

    // Tratando subparadas
    agente.localidadeNome = agente.localidade ? agente.localidade.nome-localidade : '';
    agente.unidadeDestacamentoNome = agente.unidade-destacamento ? agente.unidade-destacamento.nome-unidade : '';
    agente.unidadeLotacaoNome = agente.unidade-lotacao ? agente.unidade-lotacao.nome-unidade : '';

    // Restante do teu código...
  });
}

Atualização do HTML:

Agora, tem que arrumar o HTML pra refletir essas mudanças. Bota as divs e labels certinhas pra mostrar as infos do jeito que tu quer. Dá uma olhada nesse exemplo:

<div class="dadosUsuario" *ngIf="showSpinner == false">
  <div>
    <label>Cargo</label>
    <span><strong>{{agente.cargo}}</strong></span>
  </div>
  <div>
    <label>Matrícula</label>
    <span><strong>{{agente.matricula}}</strong></span>
  </div>
  <div>
    <label>Cpf</label>
    <span><strong>{{agente.cpf}}</strong></span>
  </div>
  <!-- Bota mais divs e labels conforme precisar pras outras paradas -->
  <div>
    <label>Localidade</label>
    <span><strong>{{agente.localidadeNome}}</strong></span>
  </div>
  <div>
    <label>Unidade Destacamento</label>
    <span><strong>{{agente.unidadeDestacamentoNome}}</strong></span>
  </div>
  <div>
    <label>Unidade Lotação</label>
    <span><strong>{{agente.unidadeLotacaoNome}}</strong></span>
  </div>
</div>

Só ajusta esse código de acordo com a realidade do teu objeto e as necessidades do teu projeto. Isso é só um guia pra te orientar. Se tiver mais subparadas, segue o mesmo esquema.

Obrigado! Vou tentar: Só melhorar a explicação:

Meu service, retorna ok

getistarAgente(matricula: string):Observable { return this.http.get(this.apiURL + '/v1/empregados/' + matricula) }

    retorna ok , porem com problema para mostrar como tinha dito
component.ts:
varaivel

 historico: Agente;

: getListaAgente(): void { this.restApi.getistarAgente(this.form.get('matricula').value).subscribe(resp => { this.historico = resp console.log(this.historico) }, error => { console.error(error); this.messageService.add({ severity: 'error', summary: 'Erro', detail: error.error.mensagem }); }); }

Classes:

export class Agente { cargo:string codigofuncao: string; cpf: string; digitoverificador: string; email:string matricula:string; nome: string; nomefuncao:string localidade = new Localidade(); unidadedestacamento = new UnidadeDestacamento(); unidadelotacao = new UnidadeDestacamento();

};

export class Localidade{ codigo:string nome:Localidade sigla_uf:string

};

export class UnidadeDestacamento{ codigo:string; nome_unidade:string; numero_natural:string; sigla_unidade:string; }

export class UnidadeLotacao{
codigo:string
nome_unidade:string;
numero_natural:string;
sigla_unidade:string;



}