Solucionado (ver solução)
Solucionado
(ver solução)
6
respostas

*ngFor não responde!

Eu estou tentando implementar o loop das fotos recebidas do banco de dados, mas o loop estranhamente não responde.

Meu componente :

import { Component } from '@angular/core';
import { Http } from '@angular/http';

@Component({
  selector: 'root',
  templateUrl: 'app/root/root.component.html'
})
export class RootComponent {

  fotos: Object[] = [];

  constructor(http: Http) {
    let stream = http.get('v1/fotos');

    stream
      .map(function(res) { return res.json() })
      .subscribe(
      function(fotos) {
        console.log(fotos);
        this.fotos = fotos;
      },
      function(erro) {
        console.log(erro)
      });
  }

}

O *ngFor:

<foto *ngFor="let foto of fotos" url="{{foto.url}}" titulo="{{foto.descricao}}"></foto>

O que ocorre é que simplesmente não aparece nada na tela. O *ngFor se comporta como se não estivesse recebendo a lista vinda do componente. O estranho é que meu controle está recebendo os dados do banco e a variável fotos está recebendo esses valores (pelo menos aparentemente). Estou esquecendo algo?

6 respostas

Você mudou o nome dos arquivos, por exemplo RootComponent. Tem que verificar tudo já que não seguiu o que mostro no vídeo. É comum o aluno esquecer de renomear algo com faz isso. Aliás sugiro só mudar os nomes no final do curso.

você verificou o console por mensagens de erro? Onde está o código restante?

No aguardo.

solução!

Você usou indevidamente function em vez de arrow function. Terá problemas com escopo dinâmico. Volte para arrow function que seu código funcionará.

Você aprende sobre arrow function no curso de js avançado da Alura, pre-requesito para este curso. Angular requer conhecimento sólido de ES2015 porque typescript é um superset dessa linguagem.

Também pode conferir a aula que falo do problema de function no próprio curso de Angular.

https://cursos.alura.com.br/course/angular2-parte1/task/21368

Confira a parte "Arrow functions e escopo léxico".

Sucesso e bom estudo.

Professor, peço desculpas pelas modificações, é que eu achei que seria uma forma de tentar desbravar um pouco mais sobre a questão da configuração do Angular.

O senhor disse o seguinte: "Você usou indevidamente function em vez de arrow function. Terá problemas com escopo dinâmico. ". Fiz o que o senhor pediu, e (estranhamente) deu certo! O senhor poderia me informar com mais detalhes o motivo pelo qual uma função normal não funcionou no meu caso?

O codigo ficou assim:

import { Component } from '@angular/core';
import { Http } from '@angular/http';

@Component({
  selector: 'root',
  templateUrl: 'app/root/root.component.html'
})
export class RootComponent {

  fotos: Object[] = [];

  constructor(http: Http) {
    let stream = http.get('v1/fotos');

    stream
      .map(function(res) { return res.json() })
      .subscribe(
      fotos => { //use sempre arrow-functions. Funcoes normais nao funcionam para essa situacao
        console.log(fotos);
        this.fotos = fotos;
      },
      erro => { //use sempre arrow-functions. Funcoes normais nao funcionam para essa situacao
        console.log(erro)
      });
  }

}

Arrow function tem escopo léxico, o this é estatico. Já conferiu na parte textual "Arrow functions e escopo léxico" do próprio curso de Angular?

https://cursos.alura.com.br/course/angular2-parte1/task/21368

No próprio curso do Angular na explicação textual faço passo a passo o erro acontecer e explico a arrow function, apesar disso ser pré requisito do curso, no caso o curso de JavaScript avançado. Sugiro fortemente que faça o curso pre-requisito para ficar melhor do que já é em Angular.

Se a explicação com o link do próprio curso do Angular não te atender, me fale para dar outra orientação.

Sobre você ter mudado os nomes, tranquilo, nem era esse o problema. Realmente, se for melhor para sua aprendizagem mude sim.

Refletindo sobre essa questão, cheguei à seguinte conclusão: Quando eu dei o comando this.fotos = fotos , dentro de uma função anônima, na verdade o this estava fazendo referência à função e não ao meu componente. Então, o que estava ocorrendo é que eu estava injetando os valores recebidos dentro de uma função anônima e a variável do meu componente permaneceu com uma lista vazia. Quando usei o this em uma arrow-function - como ela possui escopo léxico - o this passou a fazer referência ao meu componente , o que me permitiu acessar sua variável e atualizá-la para referenciar a lista recebida.

Faz sentido essa análise?

Exatamente! Quando usa arrow function o this se comporta como se fosse na linguagem Java (vi que cursou Java, por isso fiz essa analogia).