6
respostas

Problemas para exibir a lista de fotos do backend

Olá pessoal do alura,

No curso de angular 1 eu tive o mesmo problema eu não consegui abrir diretamente as fotos no navegador sem antes definir a whitelist do angular 1. Porém não consegui encontrar uma forma eficiente de fazer isso no angular 2 poderiam me ensinar como fazer porque acredito ser esse o problema já que o template estava sendo carregado até eu passar a usar os parâmetros do backend. Desde já agradeço.

6 respostas

Whitelist do Angular???? Não entendi. Mas pode ficar tranquilo que mais de 2000 pessoas concluíram o curso de Angular 1 sem problema algum.

Pode me explicar?

https://docs.angularjs.org/api/ng/provider/$sceDelegateProvider eu precisei utilizar isso no angular 1 para conseguir abrir as fotos na minha aplicação. Por isso pensei que seria necessário fazer o mesmo no angular 2.

Não é necessário fazer isso em Angular 1.X. Aliás, nem mostro isso no curso. Esse recurso é para fazer uma interpolação que consta tag HTML dentro dela, o que é perigoso para uma aplicação.

Você mudou a aplicação do curso do Angular 1.X? Sendo assim, não é necessário fazer isso com o Angular 2.

Você esta acessando a aplicação do mesmo servidor?


Professor eu estava tentando fazer uma requisição get desta maneira:

http
        .get('v1/fotos')
        .map(function(res){return res.json()})
        .subscribe(function(fotos) {
            this.fotos = fotos;
            console.log(this.fotos);
        },function(error){
            console.log(error);
        });

Quando eu fiz exatamente como na aula funcionou tudo certinho. Eu notei que dessa forma que postei acima quando eu do um console.log(this.fotos) aparece um Array(6) enquanto que do jeito que foi mostrado na aula quando eu do um console.log(this.fotos) aparece um [Object, Object,..]. Eu abri os dois no console e vi que eles são idênticos (pelo menos na exibição do console) exceto por esse detalhe. Por que não funciona com um Array?

Você não pode usar function, precisa usar uma arrow function devido ao escopo léxico da função.

Na aula, no final eu faço assim:

 http.get('v1/fotos')
            .map(res => res.json())
            .subscribe(
                fotos => this.fotos = fotos,
                erro => console.log(erro)
            );

Vi que você não fez o curso de JavaScript avançado, pré-requisito deste curso. Lá eu explico a diferença entre function e arrow function. Arrow function não é apenas uma sintaxe mais enxuta.

Na explicação do capítulo, dá uma conferida em Arrow functions e escopo léxico.

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

Seria bem legal que você fizesse o curso indicado como pré-requisito, caso contrário encontrará outras dificuldades.

Sucesso e bom estudo meu aluno!