*ngFor doesn't display data from API

June 29, 2022

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) 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>