Form not returning Angular data

Question

I’m making a form and after saving the client I want to list the customers. I performed the code but on the screen is not returning the data but is appearing the line after registering a new client, and in the console is coming the array with the data.

<table class="table">
    <thead>
      <tr>
        <th *ngFor="let head of headElements" scope="col">{{head}}</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let c of clientes">
        <td>{{c.NOME}}</td>
        <td>{{c.CPF}}</td>
        <td>{{c.EMAIL}}</td>
        <td><button class="btn-primary" (click)="selecionarClientePorId(c.IDCLIENTE)" >Editar</button></td>
      </tr>
    </tbody>
  </table>

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {


  headElements = ['Nome', 'CPF', 'Email'];
  clientes: any = [];

  url = 'http://localhost:8080/api/clientes';

  constructor(private http: HttpClient){}


  ngOnInit(){
    return this.http.get(this.url).subscribe((data: any[]) =>{
      this.clientes = data;
      console.log(this.clientes);
    });
}

export class Cliente {
  constructor(
    public IDCLIENTE: number,
    public NOME: string,
    public CPF: string,
    public EMAIL: string,
    public SENHA: string
  ) {}
}

Answer 1

The problem is in your template. Note that the data that appears in the console is lowercase (Cpf, email, etc.) and in your template are uppercase:

Change of :

<td>{{c.NOME}}</td>
<td>{{c.CPF}}</td>
<td>{{c.EMAIL}}</td>

for:

<td>{{c.nome}}</td>
<td>{{c.cpf}}</td>
<td>{{c.email}}</td>

Answer 2

Check the contents of data that you are assigning to this.clientes may need to use data.data to access the data you want. If the problem is not in receiving the data, at the time of showing that it is, review the HTML.