Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.
Tenho esse backend em JavaScript que está rodando na port 3000 e estou tentando fazer a requisição de uma lista de filmes e suas propriedades, mas estou obtendo esse erro acima.
HTML file
<div class="movies-container text-center">
<div class="movies-table-list" *ngFor="let movie of movies">
<div class="banner-movie">
{{ movie.title }}
</div>
</div>
</div>
component.ts
import { Component, OnInit } from '@angular/core';
import { take } from 'rxjs/operators';
import { Movies } from './../movies.interface';
import { SmartService } from './../smart.service';
@Component({
selector: 'app-movies',
templateUrl: './movies.component.html',
styleUrls: ['./movies.component.scss']
})
export class MoviesComponent implements OnInit {
movies: Movies[];
constructor(
private smartService: SmartService
) { }
ngOnInit(): void {
this.getMoviesList();
}
getMoviesList() {
this.smartService.getMovies()
.pipe(
take(1)
)
.subscribe(
response => this.onSucess(response),
error => this.onError(error)
);
}
onSucess(response: Movies[]) {
this.movies = response;
}
onError(error: any) {
console.log('Erro ao carregar os filmes');
}
}
service.ts
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Movies } from './movies.interface';
@Injectable({
providedIn: 'root'
})
export class SmartService {
baseUrl = 'http://localhost:3000';
constructor(
private http: HttpClient
) { }
getMovies() {
return this.http.get<Movies []>(this.baseUrl + '/filmes?page=1');
}
}
interface.ts
export interface Movies {
id: number;
poster_path: string;
title: string;
overview: string;
original_language: string;
}
API doc
{
"page": 1,
"results": [
{
"adult": false,
"backdrop_path": "https://image.tmdb.org/t/p/original/pcDc2WJAYGJTTvRSEIpRZwM3Ola.jpg",
"genre_ids": [
28,
12,
14,
878
],
"id": 791373,
"original_language": "en",
"original_title": "Zack Snyder's Justice League",
"overview": "Determinado a garantir que o sacrifício final do Superman não foi em vão, Bruce Wayne alinha forças com Diana Prince com planos de recrutar uma equipe de metahumanos para proteger o mundo de uma ameaça de proporções catastróficas que se aproxima.",
"popularity": 11783.352,
"poster_path": "https://image.tmdb.org/t/p/w185_and_h278_bestv2/v9XwEXYWpxt2rpkmFBiQ1zeyKUy.jpg",
"release_date": "2021-03-18",
"title": "Liga da Justiça de Zack Snyder",
"video": false,
"vote_average": 8.7,
"vote_count": 3389
},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{}
],
"total_pages": 500,
"total_results": 10000
}
Alguém sabe o que poderia ser?