Skip to main content
Explicación mejorada con un enlace a la documentación
Origen Enlace
OscarGarcia
  • 28.5k
  • 3
  • 29
  • 64

El problema que sufres es debido a que el contenido de la variable DataUser no se definirá hasta que se resuelva la promesa, por lo que no podrás acceder a sus propiedades hasta entonces.

Una manera de resolver este problema es accediendo a la información únicamente cuando ésta llegue usando async:

<div class="data-user" *ngIf="DataUser | async as dataUser">
  <span>{{ dataUser.nombre }} </span>
  <span>{{ dataUser.apellido }} </span>
</div>

Nota que el nombre de la variable ha cambiado de DataUser a dataUser.

Otra forma de hacerlo es a través de un valor inicial:

ngOnInit(): void {
  /* Valor inicial hasta que lleguen los datos */
  this.DataUser = {
    nombre: '-',
    apellidos: '-'
  };
  //TRAER LOS DATOS DEL USUARIO EN SESION
  this.user.userData()
  .subscribe(
     res =>{
       this.DataUser = res
     },
     err =>{
       console.log(err);
     }
  );
}

Una tercera forma de solucionar el problema, aunque no te recomiendo acostumbrarte a ella, es hacer uso del operador ?operador de navegación segura (?) para detectar la disponibilidad del dato:

<div class="data-user" *ngIf="DataUser | async as dataUser">
  <span>{{ (DataUser | async)?.nombre }} </span>
  <span>{{ (DataUser | async)?.apellido }} </span>
</div>

El problema que sufres es debido a que el contenido de la variable DataUser no se definirá hasta que se resuelva la promesa, por lo que no podrás acceder a sus propiedades hasta entonces.

Una manera de resolver este problema es accediendo a la información únicamente cuando ésta llegue usando async:

<div class="data-user" *ngIf="DataUser | async as dataUser">
  <span>{{ dataUser.nombre }} </span>
  <span>{{ dataUser.apellido }} </span>
</div>

Nota que el nombre de la variable ha cambiado de DataUser a dataUser.

Otra forma de hacerlo es a través de un valor inicial:

ngOnInit(): void {
  /* Valor inicial hasta que lleguen los datos */
  this.DataUser = {
    nombre: '-',
    apellidos: '-'
  };
  //TRAER LOS DATOS DEL USUARIO EN SESION
  this.user.userData()
  .subscribe(
     res =>{
       this.DataUser = res
     },
     err =>{
       console.log(err);
     }
  );
}

Una tercera, aunque no te recomiendo acostumbrarte a ella, es hacer uso del operador ?:

<div class="data-user" *ngIf="DataUser | async as dataUser">
  <span>{{ (DataUser | async)?.nombre }} </span>
  <span>{{ (DataUser | async)?.apellido }} </span>
</div>

El problema que sufres es debido a que el contenido de la variable DataUser no se definirá hasta que se resuelva la promesa, por lo que no podrás acceder a sus propiedades hasta entonces.

Una manera de resolver este problema es accediendo a la información únicamente cuando ésta llegue usando async:

<div class="data-user" *ngIf="DataUser | async as dataUser">
  <span>{{ dataUser.nombre }} </span>
  <span>{{ dataUser.apellido }} </span>
</div>

Nota que el nombre de la variable ha cambiado de DataUser a dataUser.

Otra forma de hacerlo es a través de un valor inicial:

ngOnInit(): void {
  /* Valor inicial hasta que lleguen los datos */
  this.DataUser = {
    nombre: '-',
    apellidos: '-'
  };
  //TRAER LOS DATOS DEL USUARIO EN SESION
  this.user.userData()
  .subscribe(
     res =>{
       this.DataUser = res
     },
     err =>{
       console.log(err);
     }
  );
}

Una tercera forma de solucionar el problema, aunque no te recomiendo acostumbrarte a ella, es hacer uso del operador de navegación segura (?) para detectar la disponibilidad del dato:

<div class="data-user" *ngIf="DataUser | async as dataUser">
  <span>{{ (DataUser | async)?.nombre }} </span>
  <span>{{ (DataUser | async)?.apellido }} </span>
</div>
Tercera opción
Origen Enlace
OscarGarcia
  • 28.5k
  • 3
  • 29
  • 64

El problema que sufres es debido a que el contenido de la variable DataUser no se definirá hasta que se resuelva la promesa, por lo que no podrás acceder a sus propiedades hasta entonces.

Una manera de resolver este problema es accediendo a la información únicamente cuando ésta llegue usando async:

<div class="data-user" *ngIf="DataUser | async as dataUser">
  <span>{{ dataUser.nombre }} </span>
  <span>{{ dataUser.apellido }} </span>
</div>

Nota que el nombre de la variable ha cambiado de DataUser a dataUser.

Otra forma de hacerlo es a través de un valor inicial:

ngOnInit(): void {
  /* Valor inicial hasta que lleguen los datos */
  this.DataUser = {
    nombre: '-',
    apellidos: '-'
  };
  //TRAER LOS DATOS DEL USUARIO EN SESION
  this.user.userData()
  .subscribe(
     res =>{
       this.DataUser = res
     },
     err =>{
       console.log(err);
     }
  );
}

Una tercera, aunque no te recomiendo acostumbrarte a ella, es hacer uso del operador ?:

<div class="data-user" *ngIf="DataUser | async as dataUser">
  <span>{{ (DataUser | async)?.nombre }} </span>
  <span>{{ (DataUser | async)?.apellido }} </span>
</div>

El problema que sufres es debido a que el contenido de la variable DataUser no se definirá hasta que se resuelva la promesa, por lo que no podrás acceder a sus propiedades hasta entonces.

Una manera de resolver este problema es accediendo a la información únicamente cuando ésta llegue usando async:

<div class="data-user" *ngIf="DataUser | async as dataUser">
  <span>{{ dataUser.nombre }} </span>
  <span>{{ dataUser.apellido }} </span>
</div>

Nota que el nombre de la variable ha cambiado de DataUser a dataUser.

Otra forma de hacerlo es a través de un valor inicial:

ngOnInit(): void {
  /* Valor inicial hasta que lleguen los datos */
  this.DataUser = {
    nombre: '-',
    apellidos: '-'
  };
  //TRAER LOS DATOS DEL USUARIO EN SESION
  this.user.userData()
  .subscribe(
     res =>{
       this.DataUser = res
     },
     err =>{
       console.log(err);
     }
  );
}

El problema que sufres es debido a que el contenido de la variable DataUser no se definirá hasta que se resuelva la promesa, por lo que no podrás acceder a sus propiedades hasta entonces.

Una manera de resolver este problema es accediendo a la información únicamente cuando ésta llegue usando async:

<div class="data-user" *ngIf="DataUser | async as dataUser">
  <span>{{ dataUser.nombre }} </span>
  <span>{{ dataUser.apellido }} </span>
</div>

Nota que el nombre de la variable ha cambiado de DataUser a dataUser.

Otra forma de hacerlo es a través de un valor inicial:

ngOnInit(): void {
  /* Valor inicial hasta que lleguen los datos */
  this.DataUser = {
    nombre: '-',
    apellidos: '-'
  };
  //TRAER LOS DATOS DEL USUARIO EN SESION
  this.user.userData()
  .subscribe(
     res =>{
       this.DataUser = res
     },
     err =>{
       console.log(err);
     }
  );
}

Una tercera, aunque no te recomiendo acostumbrarte a ella, es hacer uso del operador ?:

<div class="data-user" *ngIf="DataUser | async as dataUser">
  <span>{{ (DataUser | async)?.nombre }} </span>
  <span>{{ (DataUser | async)?.apellido }} </span>
</div>
Origen Enlace
OscarGarcia
  • 28.5k
  • 3
  • 29
  • 64

El problema que sufres es debido a que el contenido de la variable DataUser no se definirá hasta que se resuelva la promesa, por lo que no podrás acceder a sus propiedades hasta entonces.

Una manera de resolver este problema es accediendo a la información únicamente cuando ésta llegue usando async:

<div class="data-user" *ngIf="DataUser | async as dataUser">
  <span>{{ dataUser.nombre }} </span>
  <span>{{ dataUser.apellido }} </span>
</div>

Nota que el nombre de la variable ha cambiado de DataUser a dataUser.

Otra forma de hacerlo es a través de un valor inicial:

ngOnInit(): void {
  /* Valor inicial hasta que lleguen los datos */
  this.DataUser = {
    nombre: '-',
    apellidos: '-'
  };
  //TRAER LOS DATOS DEL USUARIO EN SESION
  this.user.userData()
  .subscribe(
     res =>{
       this.DataUser = res
     },
     err =>{
       console.log(err);
     }
  );
}