[FIXED] ngfor does not work when displaying multiple cards in ionic angular


Good morning, I am consuming an api that I made in laravel and so far if I am bringing the data well, since I tested them by the console. Now the problem is that when I generate some cards in ionic to show the data that I am consuming does not show me anything, all this I do with a ngfor, when I remove it shows the example card.

code and sample

post-list component

    <ion-list-header> Usuarios </ion-list-header>
    <app-post-item *ngFor=" let item of usaurios" [usuario]="item">

post-item component

    <ion-avatar slot="start">
        <img src="https://i.pravatar.cc/150?img=2" />
        <h3>I'm a big deal</h3>
        <p>Listen, I've had a pretty messed up day...</p>

enter image description here

The moment I remove the *ngFor=" let item of usaurios" [user]="item" in the post-list component now I get this
enter image description here

I really don’t know what I’m doing wrong or if I have a mistake….



export class UserService {
    public url: String = environment.url;
    public usuarios$ = new Subject<Usuario[]>(); 
    public usuario$ = new Subject<Usuario>();

    public usuarios: Usuario[] = [];
    public usuario: Usuario;
    constructor(public http: HttpClient) {}
    all$(): Observable<Usuario[]> {
        return this.usuarios$.asObservable();
    all(): Observable<any> {
        this.usuarios = [];
        return this.http.get<Usuario[]>(this.url + 'usuario').pipe(
            map ((res: any[]) => {
                Array.from(res).forEach((item: any) => {
                    this.usuario = new Usuario();


export class PostListComponent implements OnInit {
    public usaurios: Usuario[] = [];
    public usuario: Usuario;
    public usuarioSubscription = new Subscription();

        public userservice: UserService
    ) {}

    ngOnInit() {
        this.usuarioSubscription = this.userservice.all$().subscribe((res: Usuario[])=>{
            this.usaurios = res;
        this.userservice.all().subscribe(res => {

mi consola


import { Component, Input, OnInit } from '@angular/core';
import { Usuario } from 'src/app/models/usuario';

    selector: 'app-post-item',
    templateUrl: './post-item.component.html',
    styleUrls: ['./post-item.component.scss'],
export class PostItemComponent implements OnInit {
    @Input() usuario: Usuario;
    constructor() {}

    ngOnInit() {}


I think the error was in the forEach when adding them. I applied another logic using only the map


all(): Observable<any> {
        return this.http.get(`${this.url}usuario`).pipe( // <-- URL and pipe is for 404 error
            map((res: any) => {
                this.usuarios = res.data; // receives the data and stores it in the users variable
                this.usuarios$.next(this.usuarios); // sends the data to the usuarios$ variable so that it can be subscribed in the component
                return this.usuarios; // returns the data that is in the users variable
            catchError(err => {
                return err;

and it did work for me

Answered By – John James

Answer Checked By – Willingham (Easybugfix Volunteer)

Leave a Reply

(*) Required, Your email will not be published