0

estoy tratando de unir Angular con Spring Boot pero tengo problemas y no me esta cargando mi data de mi base de datos en mi html, me esta lanzando este error en mi front-end , estoy utilizando CORS ; implemente el servicio listarUsuario en la parte Spring y lo quiero mostrar en una tabla ;¿Qué error estoy cometiendo?. Gracias por su ayuda se los agradeceria.

ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.
    at NgForOf.ngDoCheck (common.js:3193)
    at callHook (core.js:3285)
    at callHooks (core.js:3251)
    at executeCheckHooks (core.js:3184)
    at refreshView (core.js:7335)
    at refreshComponent (core.js:8473)
    at refreshChildComponents (core.js:7132)
    at refreshView (core.js:7376)
    at refreshEmbeddedViews (core.js:8427)
    at refreshView (core.js:7350)

este es el código en spring , está la ruta de Angular y las ruta principal que es el RequestMapping y la ruta de listar

@RestController
@CrossOrigin(origins = {"http://localhost:4200"})
@RequestMapping("/api/usu")
public class UsuarioRestControlador {
    
    @Autowired
    private UsuarioServicio usuarioServicio;
    
    @GetMapping("/listarUsuario")
    public Map<String,Object> listarUsuario(){
        Map<String,Object> rpta= new HashMap<String,Object>();
        List<Usuario> listaUsuario = usuarioServicio.listarUsuario();
        rpta.put("listado",listaUsuario);
        return rpta;
    }

este es el código en angular: este es el servicio, esta la ruta de mi localhost , tambien estoy importando mi clase Usuario

import {Injectable} from '@angular/core';
import {USUARIO} from '../usuario/usuario.json';
import {Usuario} from './usuario'
import {Observable} from 'rxjs';
import {of} from 'rxjs';
import {HttpClient} from '@angular/common/http';

@Injectable()
export class UsuarioService{
    
    private url : string = 'http://localhost:8080/api/usu/listarUsuario';

    constructor(private http:HttpClient){
    }

    getUsuarios():Observable<Usuario[]>{

        return this.http.get<Usuario[]>(this.url);
    }
}

este es el Json que devuelve en el Spring

{"listado":[{"fec_REG_USUARIO":"2020-10-22T11:38:14.383","contra_USUARIO":"1234","usu_USUARIO":"local2","nom_USUARIO":"carlos aldair","fec_NAC":null,"id_USUARIO":2,"apell_USUARIO":"zavala"},{"fec_REG_USUARIO":"2020-10-26T13:52:35.253","contra_USUARIO":"1234","usu_USUARIO":"local2","nom_USUARIO":"juan","fec_NAC":null,"id_USUARIO":3,"apell_USUARIO":"zavala tomayro"},{"fec_REG_USUARIO":"2020-10-26T13:53:20.477","contra_USUARIO":"123","usu_USUARIO":"local2","nom_USUARIO":"matias","fec_NAC":null,"id_USUARIO":4,"apell_USUARIO":"tomayro"},{"fec_REG_USUARIO":"2020-10-26T15:27:07.103","contra_USUARIO":"123","usu_USUARIO":"local2","nom_USUARIO":"carlos","fec_NAC":null,"id_USUARIO":5,"apell_USUARIO":"tomayro"},{"fec_REG_USUARIO":"2020-10-26T15:57:55.697","contra_USUARIO":"contrasena","usu_USUARIO":"usuario","nom_USUARIO":"nombre","fec_NAC":null,"id_USUARIO":6,"apell_USUARIO":"apellido"},{"fec_REG_USUARIO":"2020-10-26T16:04:21.93","contra_USUARIO":"123","usu_USUARIO":"123","nom_USUARIO":"mati","fec_NAC":null,"id_USUARIO":7,"apell_USUARIO":"casas"},{"fec_REG_USUARIO":"2020-10-26T16:05:36.33","contra_USUARIO":"123","usu_USUARIO":"123","nom_USUARIO":"cristian","fec_NAC":null,"id_USUARIO":8,"apell_USUARIO":"quispe"},{"fec_REG_USUARIO":"2020-10-26T16:06:35.517","contra_USUARIO":"123","usu_USUARIO":"123","nom_USUARIO":"manolo","fec_NAC":null,"id_USUARIO":9,"apell_USUARIO":"cazt"},{"fec_REG_USUARIO":"2020-10-27T11:34:56.797","contra_USUARIO":"1234","usu_USUARIO":"1234","nom_USUARIO":"juan carlos","fec_NAC":null,"id_USUARIO":12,"apell_USUARIO":"carballo"},{"fec_REG_USUARIO":"2020-10-27T16:49:44.233","contra_USUARIO":"8778","usu_USUARIO":"54+","nom_USUARIO":"guty","fec_NAC":null,"id_USUARIO":13,"apell_USUARIO":"quispe arias"},{"fec_REG_USUARIO":"2020-10-30T19:08:53.773","contra_USUARIO":"48878","usu_USUARIO":"yayito","nom_USUARIO":"yayito lucas","fec_NAC":"2017-06-13T05:00:00.000+00:00","id_USUARIO":15,"apell_USUARIO":"husto"},{"fec_REG_USUARIO":"2020-11-10T16:19:01.49","contra_USUARIO":"1234","usu_USUARIO":"local2","nom_USUARIO":"aldair","fec_NAC":"0024-12-15T05:00:00.000+00:00","id_USUARIO":16,"apell_USUARIO":"zavala"},{"fec_REG_USUARIO":"2020-11-10T16:19:45.577","contra_USUARIO":"1234","usu_USUARIO":"local2","nom_USUARIO":"aldair","fec_NAC":"0024-12-15T05:00:00.000+00:00","id_USUARIO":17,"apell_USUARIO":"zavala"},{"fec_REG_USUARIO":"2020-11-10T16:20:02.04","contra_USUARIO":"1234","usu_USUARIO":"local2","nom_USUARIO":"pepito","fec_NAC":"0024-12-15T05:00:00.000+00:00","id_USUARIO":18,"apell_USUARIO":"casas"},{"fec_REG_USUARIO":"2020-11-10T16:20:51.72","contra_USUARIO":"1234","usu_USUARIO":"local2","nom_USUARIO":"patito","fec_NAC":"1995-07-19T05:00:00.000+00:00","id_USUARIO":19,"apell_USUARIO":"casas"}]}

aquí recibo el servicio

import { Component, OnInit } from '@angular/core';
import {Usuario} from '../usuario/usuario';
import {UsuarioService} from '../usuario/usuario.service';

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

  usuarios:Usuario[];

  constructor(private usuarioService:UsuarioService) { }

  ngOnInit(): void {
    this.usuarioService.getUsuarios().subscribe(

       usuarios =>this.usuarios = usuarios

    );
  }

}

este es el html

<div class="container">

    <table class="table table-bordered table-striped contenedor">
        <thead>
            <tr>
                <th>nombre</th>
                <th>apellido</th>
                <th>usuario</th>
                <th>contaseña</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let usuario of usuarios">
                <td>{{usuario.nombre}}</td>
                <td>{{usuario.apellido}}</td>
                <td>{{usuario.usuario}}</td>
                <td>{{usuario.contra}}</td>
            </tr>
        </tbody>
    </table>

</div>

1 respuesta 1

0

La lista de usuarios que retorna el backend está en una propiedad llamada listado:

 rpta.put("listado",listaUsuario);

En el servicio de Angular se tiene que acceder a esa propiedad:

 usuarios =>this.usuarios = usuarios.listado

Actualización

( usuarios : any ) => this.usuarios = usuarios.listado
8
  • tambien me da error de sintaxis
    – C Aldair
    Commented el 11 nov. 2020 a las 19:30
  • Agrega en tu pregunta el json que devuelve el backend para revisarlo.
    – Lobos
    Commented el 11 nov. 2020 a las 19:32
  • ya esta , ya lo agregué
    – C Aldair
    Commented el 11 nov. 2020 a las 19:42
  • Eso es la consulta que hace hibernate para listar los usuarios. Escribe la url de la API en el navegador para que te imprima ahí el json.
    – Lobos
    Commented el 11 nov. 2020 a las 19:44
  • ahora si , disculpa entendí mal
    – C Aldair
    Commented el 11 nov. 2020 a las 19:57

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.