Angular 12 - Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays

Question

I'm getting a lot of data from an external API, I want to implement it in my html, but every time I try to do a *ngFor with the data, it ends up going wrong, Could someone tell me how to solve this??

 --------HTML-----------

<ng-container *ngFor="let movie of filme">
<mat-card class="mat-card" fxFlex="0 1 calc(33.3% - 11px)"
fxFlex.lt-md="0 1 calc(50% - 11px)"
fxFlex.lt-sm="100%">
  <mat-card-header >
  <mat-card-title class="mat-card-title">
    <div>
      <p>{{movie}}</p>
    </div>
  </mat-card-title>
  </mat-card-header>
</mat-card>
</ng-container>

---------TYPESCRIPT------

  filme:any[];;

 imgUrl: string;
 titleImg: string;

  constructor(private filmes: BuscarFilmesService) {
      this.filmes.filmes().subscribe(res=>this.filme=res);
  }

 -------SERVICE----

  filmes(): Observable<Filmes[]> {
    return this.htpp.get<Filmes[]>(`${this.API_Url}/discover/movie?sort_by=popularity.desc&api_key=${this.API_key}&language=pt-BR`);
  }

Answer 1

Your code fragments look right. My guess is that res in the subscription return an object instead of an array.

I would first try and see if the res is actually an array by doing this:

constructor(private filmes: BuscarFilmesService) {

   this.filmes.filmes().subscribe(res =>
   {   
       this.filme = res;
       console.log(this.filme);
   });
}

If it does return an array. Then you can try narrow it down by using simple div with the *ngFor just in case there are some errors with the HTML.

<div *ngFor="let movie of filme">
  {{movie}}
</div>