Form not returning Angular data

Asked

Viewed 69 times

1

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
  ) {}
}

inserir a descrição da imagem aqui

  • could post how the date is coming?

  • I added a screen photo showing the console and table without the data

2 answers

0

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>
  • @Laissant'ana to make sure what is coming in your template, put within some td the following: <td>{{c | json}}</td>. Make sure that the properties that will be printed in this command are the same as used in your template. If you can post the printed content right here.

  • 1

    I had made change to the wrong file, but now I tested it and it was!! thank you very much!!

  • @Laissant'ana how cool! needing just talk ;)

-1

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.

  • the returned API data is printed in the console. data is a Array and not an object with the property data

Browser other questions tagged

You are not signed in. Login or sign up in order to post.