Consume api - Angular

Question

Consume api - Angular

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

Good evening I'm consuming an api of movies on Angular. But I can not display in the template, in the console.log this is appearing right, but I can not pass the value pro template

My 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;
        // }

      });
  }
}

My Template:

<hr>
<h2>Top Filmes </h2>

<li *ngFor="let f of filmes">
    {{f.id}} {{f.name}}
</li>

api template angular

asked by anonymous 01.06.2018 / 00:31

2 answers

Good practices Asp.net Core MVC: Create a DropDown for a current record to be used globally throughout the system Problems loading a DataTable with pagination and filters using Asp.net Core MVC

score 0 · Answer 1

This is apparently only happening because you are assigning the supposed array of movies to a variable that is not being reported in *ngFor="let f of filmes" , so try replacing the line this.lista = data; with this.filmes = data; .

score 0 · Answer 2

You are doing *ngFor in the Movies array that is empty. Within your ' .subscribe ' you should assign the ' date ' value to the local ' movies ' attribute.

So:

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