Issue
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?
Solution
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 -
- The API is throwing error so the
catchError(this.errorHandler)
insidegetAll()
method is returning an empty array. - The component or parent component's
ChangeDetectionStrategy
is set toOnPush
. 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>
Answered By - Touhid Rahman
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.