i am working in a school project. The front end is communicating with the API and the results are displayed in the browser console:
Results displayed in the console.log
this is the interface
export interface Anuncios {
id: number;
AnuncioTipo: string;
AnuncioAssunto: string;
AnuncioDescricao: string;}this is the ts file:
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);
});
}
}this is the html file:
<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>Results displayed in the application, it only shows the ID
The application doesn't show the data collected from the web API, how can i fix this?
The API results in screenshot shows that the object keys are in camelCase, but your interface has them in TitleCase.
If that doesn't solve the issue then few other problems could be -
catchError(this.errorHandler) inside getAll() method is returning an empty array.ChangeDetectionStrategy is set to OnPush. Although it should not create this specific issue here, but you never know.First check whether there is an error in the AnunciosService.getAll() method. If none, then you may try using async pipe. That way you overcome the change detection and also closing the stream automatically against probable memory leak.
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) { }
}
Template:
<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>
Your interface properties (in this case) need to match the properties coming from the API, they are all starting with lowercase (camelCase) from the API as seen in the console log.
try changing your interface to this
export interface Anuncios {
id: number;
anuncioTipo: string;
anuncioAssunto: string;
anuncioDescricao: string;
}
and your html to this
<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>