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

Acessar Angular Expression com um getter

No curso Ionic 2: Aula 3, exercício 6 (A página de Perfil), está sendo criada a página de perfil dentro da aplicação. O instrutor criou um getter (get UsuarioLogado()) e, dentro da página do template, ele acessa através da AE {{ usuarioLogado }}.

Enquanto eu faço o curso, estou tentando criar uma aplicação própria, usando a mesma base de informações. Na minha aplicação também há uma página de perfil, a única diferença é que optei por acessar a API via POST, não get.

Enfim, eu tenho o seguinte código:

    get usuarioLogado() {
        return this._service.buscaPerfil(this.userLogin);
    }

E dentro do meu template:

<p> O seu primeiro nome é {{ this.usuarioLogado.userFirstname }}</p>

Mas o campo fica em branco.

Como eu poderia debugar o Angular para saber onde a informação está se perdendo?

O meu usuário service com POST está assim - e ele esta conseguindo criar o objeto do Usuário corretamente:

        return this._http.post(addressProfile, dadosLogin, optionsLogin)
            .toPromise()
            .then(resposta => {
                let convertido = resposta.json();
                let usuario = convertido[0];
                let criarUsuario = new Usuario(usuario.first_name, usuario.second_name, usuario.user_id, usuario.login,usuario.email,usuario.profile_image,usuario.weigth_goal,usuario.loose_weigth);
                return criarUsuario;
            })
            .catch(err => console.log("Erro ao buscar perfil: " + err));
4 respostas

Bom dia.

Mostre a implementação de this._service.buscaPerfil.

Se o retorno for uma promise ou um Observable não vai funcionar.

Claro, essa foi a implementação que fiz, baseado no curso, mas usando POST ao invés do GET.

    public buscaPerfil(userLogin: string) {

        let addressProfile = "http://api.meupezinho.com.br/profile_retrieve-info.php";
        let dadosLogin = JSON.stringify({
            "userLogin": userLogin
        });
        let headerLogin = new Headers(
            { "Content-Type": "application/json"}
        );
        let optionsLogin = new RequestOptions({
            headers: headerLogin
        });

        return this._http.post(addressProfile, dadosLogin, optionsLogin)
            .toPromise()
            .then(resposta => {
                let convertido = resposta.json();
                let usuario = convertido[0];
                let criarUsuario = new Usuario(usuario.first_name, usuario.second_name, usuario.user_id, usuario.login,usuario.email,usuario.profile_image,usuario.weigth_goal,usuario.loose_weigth);
                return criarUsuario;
            })
            .catch(err => console.log("Erro ao buscar perfil: " + err));
    }
solução!

Então. Você não pode usar uma promise como valor de uma expressão. É por isso que não funciona. Eu não faço isso no treinamento.

Para funcionar, injete o serviço e assim que tiver acesso a ele na chamada do then da promise retornada por ele você guarda o usuário como propriedade do componente. É essa propriedade que você fará o binding via expressão.

Mesmo processo quando procuramos uma foto para alterar no curso de Angular.

Ah, perfeito. Eu demorei um pouco para entender porque sou iniciante em Angular e Ionic, mas agora com essa instrução eu consegui, muito bom. Obrigado! :)

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software