3

Estoy trayendo datos de un usuario a la interfaz y yo creo que estoy configurando mal mi interfaz y por eso es que me aparece el error del titulo.

Les muestro el código:

 import {IUser} from '../../app-interfaces'

 public DataUser: IUser
 ngOnInit(): void {
//TRAER LOS DATOS DEL USUARIO EN SESION
this.user.userData()
  .subscribe(
    res =>{
      this.DataUser = res
    },
    err =>{
      console.log(err);
    }
  );
}

Interfaz:

export interface IUser extends Document {
nombre: string;
apellido: string;
username: string;
email: string;
birth: string;
sexo: string;
seguidos: string;
seguidores: string;
password: string;
}

En el frontend no tengo ningún problema, muestro los datos como deben ser sin problema, pero cuando abro la consola me aparece el siguiente error:

Captura de pantalla del error

Éste es el HTML:

:129: <div class="data-user">
:130:    <span>{{ DataUser.nombre }} </span>
:131:    <span>{{ DataUser.apellido }} </span>
:132: </div>

Aclaro que los datos se muestran correctamente. El único problema es que me aparece ese error en la consola.

En un primer momento lo solucioné y era un problema de la interfaz IUser, pero luego refactorizé el código y me olvidé de cómo lo había solucionado y estoy seguro que es la interzaz de usuario o, al menos, estoy colocando mal el public: DataUser: IUser.

1
  • 1
    Si es un dato asíncrono deberías mostrarlo únicamente cuando lo hayas obtenido o bien darle un valor inicial mientras se hace la carga con, por ejemplo, this.DataUser = {nombre: '-', apellido: '-'};. Commented el 20 abr. 2020 a las 6:17

2 respuestas 2

4

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>
3
  • 2
    ambas respuestas me ayudaron, muchisimas gracias por su tiempo sabiendo la hora que es, mil gracias
    – Enzo
    Commented el 20 abr. 2020 a las 6:32
  • 1
    Existe una tercera opción. Acabo de de editar mi respuesta para agregarla. Por cierto, aquí es temprano :) Commented el 20 abr. 2020 a las 6:33
  • aqui son las 3 de la madrugada xd, muchisimas gracias de verdad
    – Enzo
    Commented el 20 abr. 2020 a las 6:35
2

La obtencion de los datos es asincrono, por lo que tratas de pintar un dato sin si quiera obtenerlo, debes poner un renderizado condicional, o mostrar un spinner o algo mientras la data se carga en el componente, y una vez ese componente no sea null, ahi si renderizarlo

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

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.