Consumir api - Angular

Programação
#1

Boa noite
Estou consumindo uma api de filmes no Angular. Porém não consigo exibir no template, no console.log esta aparecendo certinho, mas nao consigo passar o valor pro template

Meu component :

import { Component, OnInit } from ‘@angular/core’;
import { HttpClient, HttpHeaders } from ‘@angular/common/http’;

@Component({
selector: ‘app-home’,
templateUrl: ‘./home.component.html’,
styleUrls: [’./home.component.css’]
})
export class HomeComponent implements OnInit {

public filmeId;
lista= new Object();
filmes = new Array();
apiUrl = ‘https://api.themoviedb.org/3/movie/top_rated?api_key=13f85672f7128ad9667356e1904e0012&language=pt-BR&page=1’;

constructor(private http: HttpClient) { }

ngOnInit(): void {
this.http // get todas os filmes
.get(this.apiUrl + “filmes/” + this.filmeId + “/filmes”, {
headers: new HttpHeaders({
‘X-Auth-Token’: ‘13f85672f7128ad9667356e1904e0012’
})
})
.subscribe(data => {
this.lista = data;
console.log(this.lista);
this.lista = data;
// }

  });

}
}

Meu Template :

Top Filmes

  • {{f.id}} {{f.name}}
    • #2

    O código é só esse mesmo? Está faltando alguma coisa aí.