tengo una api de películas, la cual me devuelve por consola este array de objetos, pero a la hora de recorrerlos no se me muestran los datos porque no estoy accediendo a data.
Aquí tengo la interface donde guardo los nombre de las variables, me gustaría renombrar los nombres de las variables que vienen de la api, pero no se, así que lo puse igual.
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
export interface Peliculas{
/* poster: string;
name: string;
id:number;
saga:string;
director:string;
descripcion:string;
fecha:string; */
id:number;
title:string;
release_date:string;
duration:string;
overview:string;
cover_url:string;
saga:string;
}
Aquí tengo el servicio donde recojo los datos de la api para mostrarlos en el componente html, pero a la hora de llamarlos me dice que no estoy accediendo a ese componente, entonces le hice el console log de la imagen
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
import { Injectable } from '@angular/core';
import {HttpClient} from '@angular/common/http'
import { Observable, of, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { Peliculas } from '../mock/peliculas';
@Injectable({
providedIn: 'root'
})
export class PeliculasService {
/* url:string="https://www.qando.es/docs/films.php"; */
url:string="https://mcuapi.herokuapp.com/api/v1/movies";
peliculas$ =this.getAll()
constructor(private httpClient:HttpClient) { }
getAll(): Observable<Peliculas[]> {
return this.httpClient.get<Peliculas []>(this.url);
}
getPeliculas(requestID: number): Observable<Peliculas | null>{
return this.httpClient.get<Peliculas>(
`${this.url}/${requestID}`
).pipe(
catchError((error)=>{
if (error.status === 404) {
return of(null);
}
return throwError(error);
})
)
}
}
En el componente html lo recorro con un ngfor pero por no se muestra porque no esta accediendo al array
*ngFor='let pelicula of pelis'
¿Cómo puedo acceder al array de data?