0

Estoy trabajando con Angular7 y tengo un component.ts llamado mostrar con su correspondiente html.

Cuando se crea el componente, va a mostrar el dni del usuario, por circunstancias de la aplicación este componente debe mostrarse ANTES de obtener los datos de un servicio rest (hace más cosas aparte de mostrar el dni y tampoco puede realizar la llamada.).

El problema es que tiene que mostrar los datos de un servicio rest el cual no se hizo su llamada, la llamada rest se hace en otro componente que se creará después.

public mostrarDni = function () {
   this.dni =  this.service.verDni[this.service.number];
};

<span>{{dni}}</span>

Y luego en otro componente:

this.service.getDatos(endPoint).subscribe(
      data => {
         this.service.verDni = data;
    }
);

Este es el segundo componente que obtendría los datos, pero sin mostrar el dni, solo se muestra el nombre, el problema es que cuando selecciono un nombre,

 <button ... (click)= "select(number)">...

 function select(){
     this.service.number = number;
 };

Meto en el servicio el número del indice para que el 1º componente sea el encargado de mostrar el dni en su html sacado del array.

Aunque ya no sirve de nada porque la función del 1º componente ya se ejecutó...

Siento no poder ser muy específico con el código, pero la base del problema es ese.

El primer componente tiene que mostrar unos datos que no tiene, más adelante cuando un usuario pinche en una pestañita, el primer componente debería mostrar los datos obtenidos en el 2º componente.

He estado depurando y como es obvio, no vuelve a pasar por el ngOninit del 1º componente para hacer la función de mostrarDni.

¿ Cómo hago para volver a ejecutar una función del 1º componente ?

Por ejemplo

Estando en el componente 2, llamo a la función del componente 1.

O estando en el componente 2, que el componente 1 detecte cambios.

O cualquier otra opción sin cambiar que primero se llame al componente 2.

Gracias.

2 respuestas 2

0

// Aún no puedo añadir un comentario directamente Hola EduBw. Lo que quieres es que el primer componente filtre al segundo, y con la respuesta del segundo, actualizar la información del primero? Bueno si es así, podría haber una solución, con @input y @outputs, te suena? La idea es que los dos comparten el mismo padre, aunque valdría uno dentro de otro, cuando el primero cambia el valor esto permite visualizar ese segundo componente ya sea hijo o hermano, una vez este pueda recoger el resultado de su petición, que gracias al @output() respuesta: Eventemitter, ejecute el método del padre y se tiene que actualizar o tiene que actualizar al otro hijo se hace desde aquí (pero en este caso se puede dar que tengas con ngif destruirlo y añadirlo de nuevo ya con su valor anterior y todo lo recogido del segundo componente, y si este actualiza a otras variables de su mismo componente), se que suena complicado, pero es un poco más sencillo de lo que parece. Otro modo parecido es con servicios, pero creo que es más sencillo se hacen los @outputs necesarios, y que ambos componentes estén suscritos a los cambios. Ya que cuando cambien las variables se pueden modificar mas cosas o por lo menos es mas fácil desde esta forma, pero todo es revisar el código. Espero no haberte agobiado. Un saludo.

0

Ok, según entiendo necesitas dar click en la persona para luego mostrar el DNI ¿Cierto? partiendo de ese punto cada usuario debe ser un componente

<div *ngFor="let usuario of usuarios;">
<usuario-component [usuario]="usuario"></usuario-component>
</div>

Dentro de usuario.component debe haber un @Input() usuario; que reciba los datos y tambien un metodo obtenerDNI(usuario) que recibe el usuario y hace el llamado para obtenerlo. En el HTML del usuario.component debe haber un

<span *ngIf="usuario.dni">{{usuario.dni}}</span>

con un if que impida que se muestre hasta que el dni no este cargado.

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.