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