0

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>
4
  • O que aparece no console.log?
    – Marconi
    Commented 1/06/2018 às 11:13
  • Aparece a api dos filmes certinho, com id do filme, name, descricao, etc... Commented 1/06/2018 às 16:28
  • Posta na pergunta vai facilitar!
    – Marconi
    Commented 1/06/2018 às 16:28
  • Nessa parte: .subscribe(data => { this.lista = data; console.log(this.lista); this.lista = data; // } }); não seria .subscribe(data => this.filmes = data);?
    – Marconi
    Commented 1/06/2018 às 16:30

3 Respostas 3

1

aparentemente isto só está acontecendo porque você está atribuindo o suposto array de filmes a uma variável que não está sendo informada no *ngFor="let f of filmes", sendo assim tente substituir a linha this.lista = data; por this.filmes = data;.

1

Você está fazendo o *ngFor no array Filmes que se encontra vazio. Dentro do seu '.subscribe' você deve atribuir o valor de 'data' ao atributo local 'filmes'.

Assim:

.subscribe(data => {
    this.filmes = data;
    console.log(this.filmes);
}
0

A pergunta é antiga, mas creio que a resposta possa ajudar alguém.

Toda requisição http, no angular, retorna um Observable, e para que as operações do Observable ocorram é necessário se "inscrever" no obsersavable por meio do .subscribe(). E através dessas inscrições que os observables "sabem" quando novos dados foram emitidos.

No entanto, por se tratar de um "evento" assíncrono qualquer lógica síncrona realizada não funcionará corretamente(código de ex. abaixo). Toda e qualquer transformação de dados do observable deve estar ou no método .subscribe() ou no .pipe() (utilizando os operadores do RXJS).

.subscribe(data => {
        this.lista = data;
        console.log(this.lista);
        this.lista = data; // atribuir valor async para variável sync
        // }

      });

O seu código, não está incorreto, porém entra no caso que comentei, você está tentando passar para uma variável síncrona (this.lista) um valor assíncrono. Em alguns casos esse código funcionará, pois a requisição pode ser completada antes do componente ser renderizado, mas na grande maioria dos casos isso não ocorre, a requisição é completada após o componente ser renderizado tornando o valor de this.lista undefined.

Uma possível solução seria mover o local do subscribe para o template. E nesse caso não seria necessária a variável lista.

Component:

export class HomeComponent implements OnInit {
        observable$: Observable<any>;
        
        ngOnInit():void{
            this.observable$ = this.http.get('api')
              .pipe(aqui pode ser utilizado qualquer operador do rxjs);
        }
    }

Template:

<div *ngFor="let item of observable$ | async as itens">
     <span>{{item | json}}</span>
</div>

Através do pipe async é realizado o subscribe e será mostrado no template assim que a requisição for concluída. E quando o component for destruído (ngOnDestroy()) o pipe fará o unsubscribe automático.

Outra possível solução também, caso você não queria utilizar fluxos assíncronos seria por meio dos resolvers que não irão permitir a renderização do componente enquanto as requisições não forem concluídas, e com isso, os dados das requisições quando estiverem no componente não serão assíncronos (Observables).

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .