Id do usuário não retorna na tela - Angular - RESOLVIDO

Front-end
, , ,
#1

Bom dia pessoal, estou iniciando no front com Angular, e na minha tela de listar os usuarios vem os dados, mas fica faltando o id, que fica como undefined. Se alguém puder me ajudar na solução, agradeço.

consultaUser
consultaUser.PNG1228×120 3.04 KB

service.ts

export class UsuarioService {
  
  constructor(private http: HttpClient) { }
  
  getStudentList(): Observable<any> {
    return this.http.get<any>(AppConstants.baseUrl + "membro/consultar");
  }
}

USUARIO COMPONENT.ts

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { User } from 'src/app/model/user';
import { UsuarioService } from 'src/app/service/usuario.service';

@Component({
  selector: 'app-usuario',
  templateUrl: './usuario.component.html',
  styleUrls: ['./usuario.component.css']
})
export class UsuarioComponent implements OnInit {
  
  students : Observable<User[]>;
  nome :String;
  
  constructor(private usuarioService: UsuarioService) {}
  
  ngOnInit() {
    this.usuarioService.getStudentList().subscribe(data => {
      this.students = data;
    });
  }
}
#2

Como é o JSON retornado pelo endpoint: membro/consultar ?

#3

No back end esta assim o endpoint:

@CachePut
	@GetMapping(value = "/consultar", produces = "application/json") /
	public ResponseEntity<List<Membro>> ususario() {

		List<Membro> list = (List<Membro>) membroRepository.findAll();
		return new ResponseEntity<List<Membro>>(list, HttpStatus.OK);
	}

a classe no front esta assim:

export class User {

    id: Number;

    nome: String;

    email: String;

 

}
#4

E como vc está referenciando as propriedades no template?

Ah, se tu tem uma classe representando os dados retornados do backend, não utilize any na função getStudentList, devolva um Observable<User[]>.

#5

Estão assim >>

<thead class="thread-dark">

    <th scope="col">ID</th>

    <th scope="col">Nome</th>

    <th scope="col">Email</th>

    <th scope="col">Delete</th>

    <th scope="col">Editar</th>

</thead>

<tbody>

    <tr *ngFor="let student of students">

        <td>{{student.id}}</td>

        <td>{{student.nome}}</td>

        <td>{{student.email}}</td>

               

    <td><button (click)="deleteUsuario(student.id)" class="btn btn-primary">Delete</button></td>

    <td><button routerLink="['/usuarioAdd', student.id]" routerLinkActive="router-link-active" class="btn btn-warning">Editar</button></td>

</tr>

</tbody>
#6

Mas o JSON que está sendo retornado do backend, está realmente vindo com o ID? (tu consegue ver no console do navegador, na aba network)

#7

Analisando ele começa a trazer pelo nome em vez do Id, mas no controller ele retornar a lista com id e todos os demais dados, o que esta faltando para o front pegar esse id ?

image
image.png1366×768 98.4 KB

#8

Fiz um cosole.log no data e realmente não esta pegando o id do backend olha como retornou o resultado.

image
image.png1366×768 120 KB

#9

Imaginei isso. E estranho pq todas as propriedades estão nulas também. Como está a classe Membro no seu backend?

#10

Alguns registros foram nulas mesmo, pq foi no começo que eu estava fazendo teste e depois ele começou a salvar os dados corretamente a partir do registro 10, vai ter alguns dados que vai esta faltando mesmo, como endereço e telefone…

Minha classe Membro é uma classe filha que herda da alguns dados da PessoaModel, segue os código a baixa.
Classe Membro…

@Entity
public class Membro extends PessoaModel implements UserDetails{
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    private Boolean batizado;
    private Boolean transmissao;

    private String email;
    private String senha;

Classe Pai  - PessoaModel
   private String nome;
    private LocalDate dataNascimento;
    private String sexo;
    private String estadoCivil;
#11

A classe Membro tem os gets?

#12

Então mano, acabei vendo aqui não tinha nem o getter e nem o setter, que raiva e alívio ao mesmo tempo kkk
Esqueci desses caras kk

1 curtida