Estoy trabajando en un proyecto escolar. El front-end se comunica con la API y los resultados se muestran en la consola del navegador:
Resultados mostrados en el archivo console.log
esta es la interfaz
export interface Anuncios { id: number; AnuncioTipo: string; AnuncioAssunto: string; AnuncioDescricao: string;}este es el archivo ts:
import { Component, OnInit } from '@angular/core'; import { AnunciosService } from '../../services/anuncios.service'; import { Anuncios } from '../../interfaces/anuncios'; @Component({ selector: 'app-index', templateUrl: './index.component.html', styleUrls: ['./index.component.css'] }) export class IndexComponent implements OnInit { anuncios: Anuncios[] = []; constructor(public anunciosService: AnunciosService) { } ngOnInit(): void { this.anunciosService.getAll().subscribe((data: Anuncios[]) => { this.anuncios = data; console.log(this.anuncios); }); } }este es el archivo html:
<div class="container-fluid"> <h1>Todos os anuncios</h1> <a href="#" routerLink="/anuncios/create" class="btn btn-sucess">Criar novo anuncio</a> </div> <div> <ng-container *ngFor="let anuncio of anuncios"> <p>ID: {{ anuncio.id }}</p> <p>Tipo: {{ anuncio.AnuncioTipo }}</p> <p>Assunto: {{ anuncio.AnuncioAssunto }}</p> <p>Descrição: {{ anuncio.AnuncioDescricao }}</p> </ng-container> </div>Resultados mostrados en la aplicación, solo muestra el ID
La aplicación no muestra los datos recopilados de la API web, ¿cómo puedo solucionarlo?
Los resultados de la API en la captura de pantalla muestran que las claves de objeto están en camelCase , pero su interfaz las tiene en TitleCase .
Si eso no resuelve el problema, entonces algunos otros problemas podrían ser:
catchError(this.errorHandler) dentro del método getAll() devuelve una matriz vacía.ChangeDetectionStrategy del componente o del componente principal se establece en OnPush . Aunque no debería crear este problema específico aquí, pero nunca se sabe. Primero verifique si hay un error en el método AnunciosService.getAll() . Si no hay ninguno, puede intentar usar una tubería async . De esa manera, supera la detección de cambios y también cierra la transmisión automáticamente contra una posible pérdida de memoria.
import { Component } from '@angular/core'; import { AnunciosService } from '../../services/anuncios.service'; import { Anuncios } from '../../interfaces/anuncios'; import { Observable } from 'rxjs'; @Component({ selector: 'app-index', templateUrl: './index.component.html', styleUrls: ['./index.component.css'] }) export class IndexComponent { anuncios$: Observable<Anuncios[]> = this.anunciosService.getAll(); constructor(public anunciosService: AnunciosService) { } }Modelo:
<div> <ng-container *ngFor="let anuncio of anuncios$ | async"> <!-- use async --> <p>ID: {{ anuncio.id }}</p> <p>Tipo: {{ anuncio.AnuncioTipo }}</p> <p>Assunto: {{ anuncio.AnuncioAssunto }}</p> <p>Descrição: {{ anuncio.AnuncioDescricao }}</p> </ng-container> </div>Las propiedades de su interfaz (en este caso) deben coincidir con las propiedades que provienen de la API, todas comienzan con minúsculas (camelCase) de la API, como se ve en el registro de la consola.
intenta cambiar tu interfaz a esta
export interface Anuncios { id: number; anuncioTipo: string; anuncioAssunto: string; anuncioDescricao: string; }y tu html a esto
<ng-container *ngFor="let anuncio of anuncios"> <p>ID: {{ anuncio.id }}</p> <p>Tipo: {{ anuncio.anuncioTipo }}</p> <p>Assunto: {{ anuncio.anuncioAssunto }}</p> <p>Descrição: {{ anuncio.anuncioDescricao }}</p> </ng-container>