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>