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 >
<h1>Todos os anuncios</h1>
<a href="#" routerLink="/anuncios/create" >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?

CodePudding user response：

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) inside getAll() method is returning an empty array.
• The component or parent component's 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>

CodePudding user response：

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>