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 :
<hr>
<h2>Top Filmes </h2>
<li *ngFor="let f of filmes">
{{f.id}} {{f.name}}
</li>
.subscribe(data => { this.lista = data; console.log(this.lista); this.lista = data; // } });
não seria.subscribe(data => this.filmes = data);
?