2

Tengo una situación en mi proyecto y es que estoy intentando hacer que se visualice la información consumida mediante un API usando Spring Boot para mostrarla a través de Angular. Esta información se logro capturar de manera satisfactoria, pero como lo indico, no se logra mostrar en una tabla sencilla en el HTMl de Angular.

El servicio en Angular lo estoy realizando de está manera:

 private URL: string = 'http://localhost:8080';
 platos = [];

 constructor(private http: HttpClient) { }

 getPlatos():Observable<PlatoModel[]>{
   return this.http.get<PlatoModel[]>('/api/platos');
 }

Ahora en el componente de Plato lo tengo de está manera

  platos: PlatoModel[] = [];

  constructor(private platoService: PlatoService, private router: Router) { 
    this.ngOnInit();
  }

  ngOnInit(): void {
    this.platoService.getPlatos().subscribe(resp => {
      this.platos = resp;
      console.log(resp);
    });
  } 

Y justo en el HTML del componente lo tengo de está manera:

      <tr *ngFor="let plato of platos">
        <td scope="row">{{ plato.idPlato }}</td>
        <td>{{ plato.nombrePlato }}</td>
        <td>{{ plato.descripcionPlato }}</td>
        <td>{{ plato.cantidadPlato }}</td>
        <td>{{ plato.precioPlato }}</td>
        <td>{{ plato.imagenPlato }}</td>
        <td>{{ plato.clasificacionPlato }}</td>
      </tr>

Sin embargo, esto es lo único que logro visualizar en el navegador: introducir la descripción de la imagen aquí

Realmente no entiendo por qué no se visualiza la información, considero que estoy haciendo todo lo correcto. Sí me podrían ayudar, les agradecería mucho.

1 respuesta 1

1

No te está reconociendo la directiva ngFor, lo que seguramente significa que te falta un módulo básico de Angular por importar, BrowserModule:

import { BrowserModule } from '@angular/platform-browser';

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    BrowserModule,
    ...
  ],  
  ...
})
export class AppModule { }
1
  • Realmente allí estaba la solución, me faltó agregar el componente que en este caso se llama: PlatoComponent a las declaraciones dentro del @NgModule, anteriormente se me agregaban automáticamente, ahora debo hacerlas manualmente. Muchas gracias, llevaba varias horas allí sin poder avanzar. Commented el 27 jul. 2021 a las 15:16

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.