1

No puedo entender por qué no asigna el valor a la variable this.userProfile probé con promesas y tampoco asigna, alguna idea?

Código:

import { Component, OnInit } from '@angular/core';
import { NavController, NavParams, LoadingController } from 'ionic-angular';
import { Storage } from '@ionic/storage';
import * as localforage from "localforage";

import { ProfileServices } from '../../providers/profile.services';

@Component({
    selector: 'page-profile',
    templateUrl: 'profile.html',
    providers: [ProfileServices]
})
export class Profile {

    public user: any;
    public userProfile: any;

    constructor(public navCtrl: NavController, private profile: ProfileServices, public params: NavParams, public storage: Storage, public loading: LoadingController) {
        this.getPerfilData();
        console.log("user profile" + this.userProfile); //Undefined ?       
    }

    getPerfilData() {
        this.presentLoadingDefault();

        this.storage.get('user').then((user) => {

            this.user = JSON.parse(user);

            this.profile.getProfile("token", this.user.idUser).subscribe(
                (data) => {
                    this.userProfile = data;
                    console.log("user profile" + this.userProfile); //Aqui me retorna la Data http success                   
                });

        });
    }

    presentLoadingDefault() {
        let loading = this.loading.create({
            content: 'Please wait...'
        });
        loading.present();
        setTimeout(() => {
            loading.dismiss();
        }, 2000);
    }

    ionViewDidLoad() {
        // this.getPerfilData();
    }

    ionViewWillEnter() {
        // this.getPerfilData();        
    }
}

Gist: https://gist.github.com/vanckruz/92d6ea6ac114e6d28e88eb22caddc82a

7
  • imprimiste el valor de data ?
    – sioesi
    Commented el 7 nov. 2016 a las 18:34
  • Si dentro del getPerfilData hago un console.log y me trae la data perfecto pero se la estoy asignando y no persiste fuera del metodo pierde el valor como se ve en el constructor me arroja undefined Commented el 7 nov. 2016 a las 18:37
  • Estoy usando navegación por pestañas de ionic 2, la idea es cuando haga click en una pestaña cargue la data para yo mostrarla en la vista pero me arroja undefined la variable que mostrare en la vista. Commented el 7 nov. 2016 a las 18:39
  • La llamada http la hago normal como esta en la doc de angular 2, en el servicio hago un .get(ruta).map(res => res.json()) Commented el 7 nov. 2016 a las 18:41
  • Puedes modificar (data) => por data =>
    – sioesi
    Commented el 7 nov. 2016 a las 18:43

2 respuestas 2

1

Lo mas recomendable es usar promesas para tratar tus problemas de asignación

import { Component, OnInit } from '@angular/core';
import { NavController, NavParams, LoadingController } from 'ionic-angular';
import { Storage } from '@ionic/storage';
import * as localforage from "localforage";

import { ProfileServices } from '../../providers/profile.services';

@Component({
    selector: 'page-profile',
    templateUrl: 'profile.html',
    providers: [ProfileServices]
})
export class Profile {

  public user: any;
  public userProfile: any;

  constructor(public navCtrl: NavController, 
              public profile: ProfileServices, 
              public params: NavParams, 
              public storage: Storage, 
              public loading: LoadingController) {
   // Solo usar para asignar variables
}

ngOnInit(){

    let loading = this.loading.create({
        content: 'Please wait...'
    });
    // Mostramos el loading
    loading.present();

    this.getPerfilData().then( (data) => {
        // Cuando la promesa termine cerramos el loading
        loading.dismiss();
        this.userProfile = data;

    }).catch( (error) => {
        console.log(error);
        // Si ocurre un error tambien cerramos el loading
        loading.dismiss();
    });

}

getPerfilData(): Promise<any>{

  return new Promise( (resolve,reject) => { 

    this.storage.get('user').then( (user) => {

        try{
          // Parsear json siempre es conveniente try-catch
          this.user = JSON.parse(user);

          this.profile.getProfile("token", this.user.idUser).subscribe(
          (data) => {
              // Retornamos
              resolve(data);           
          }, (error) => {
              reject(error);
          });

        }catch(error){
            reject(error);
        }

    },(error) => {
        reject(error);
    });

  });

}

ionViewDidLoad() {
    // this.getPerfilData();
}

ionViewWillEnter() {
    // this.getPerfilData();        
}
}

profile.html

Se puede validar con "?", si userProfile esta undefined no nos arrojará error cuando preguntemos por sus atributos

<ion-header>
  <ion-navbar>
    <ion-title>Profile</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-card>
    <div class="image_center" *ngIf="userProfile?.picUser">         
        <img [src]="userProfile.picUser">    
    </div>
    <ion-card-content *ngIf="userProfile?.firstName && userProfile?.lastName">
        <h1>{{ userProfile.firstName }} {{ userProfile.lastName }}</h1>         
        <div class="header_primary">
            Interest
        </div>
    </ion-card-content> 
  </ion-card>
</ion-content>
2
  • @JhonnyVancKruz preguntó porque no le resulta su código. Aparte de compartir lo que (se supone) es una solución, podrías explicar un poco que había que cambiar? Así la respuesta tiene un valor para mas publico. Commented el 19 ene. 2017 a las 16:28
  • @StefanNolde tienes toda la razón, mi error Commented el 20 ene. 2017 a las 21:45
0

@Jhonny Vanckruz, no estás perdiendo el valor fuera del metodo, es que el metodo no se ha ejecutado cuando haces el primer console.log entonces el valor no existe todavía. No debes tratar de acceder a variables que reciben sus valores dentro de promesas o observadores fuera de esas promesas o observadores, porque no se sabe cuando se va a cumplir la promesa. Mas bien, debes refactorizar tu código para que se use en el mismo metodo de promise o obervador.

import { Component, OnInit } from '@angular/core';
import { NavController, NavParams, LoadingController } from 'ionic-angular';
import { Storage } from '@ionic/storage';
import * as localforage from "localforage";

import { ProfileServices } from '../../providers/profile.services';

@Component({
    selector: 'page-profile',
    templateUrl: 'profile.html',
    providers: [ProfileServices]
})
export class Profile {

    public user: any;
    public userProfile: any;

    constructor(public navCtrl: NavController, private profile: ProfileServices, public params: NavParams, public storage: Storage, public loading: LoadingController) {
        this.getPerfilData();
        console.log("user profile" + this.userProfile); // No se ha cumplido el código dentro del observador      
    }

    getPerfilData() {
        this.presentLoadingDefault();

        this.storage.get('user').then((user) => {

            this.user = JSON.parse(user);

            this.profile.getProfile("token", this.user.idUser).subscribe(
                (data) => {
                    this.userProfile = data;
                    console.log("user profile" + this.userProfile); //Aqui sí se ha cumplido y puedes accederlo.                  
                });

        });
    }

    presentLoadingDefault() {
        let loading = this.loading.create({
            content: 'Please wait...'
        });
        loading.present();
        setTimeout(() => {
            loading.dismiss();
        }, 2000);
    }

    ionViewDidLoad() {
        // this.getPerfilData();
    }

    ionViewWillEnter() {
        // this.getPerfilData();        
    }
}

y para mostrarlo en tu vista:

<ion-header>
  <ion-navbar>
    <ion-title>Profile</ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>
    <ion-card>
        <div class="image_center">          
            <img [src]="userProfile.picUser">    
        </div>
        <ion-card-content *ngIf="userProfile !== undefined && userProfile !== null">
            <h1>{{ userProfile.firstName }} {{ userProfile.lastName }}</h1>         
            <div class="header_primary">
                Interest
            </div>
        </ion-card-content> 
    </ion-card>
</ion-content>
6
  • Si pero necesito la variable para recorrerla en la vista, en la consola me da error de desconocido idUser de undefined ..en este caso yo quiero mostar en la vista el detalle del usuario {{ userProfile.nombre }} -> pero userProfile es undefined Commented el 7 nov. 2016 a las 19:06
  • ¿Podrías mostrar también el código de la vista?
    – Cameron637
    Commented el 7 nov. 2016 a las 19:27
  • la vista es esta: <ion-header> <ion-navbar> <ion-title>Profile</ion-title> </ion-navbar> </ion-header> <ion-content padding> <ion-card> <div class="image_center"> <img [src]="userProfile.picUser"> </div> <ion-card-content *ngIf="userProfile != undefined || userProfile != null "> <h1>{{ userProfile.firstName }} {{ userProfile.lastName }}</h1> <h2 *ngIf="userProfile.isDriverRole">Driver</h2> <div class="header_primary"> Interest </div> </ion-card-content> </ion-card> </ion-content> Commented el 7 nov. 2016 a las 20:02
  • Este es el gist de la vista: gist.github.com/vanckruz/a6ec505d5ad07fbdfee3e999018485ca Commented el 7 nov. 2016 a las 20:03
  • Aquí es el problema: *ngIf="userProfile != undefined || userProfile != null". En ese caso debes usar && en vez de || porque si userProfile = ==undefined entonces userProfile !== null y todavía va a mostrarlo.
    – Cameron637
    Commented el 7 nov. 2016 a las 20:06

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.