0

Hola tengo problemas para pasar los datos de una petición http a un componente hijo.

Primero obtengo los datos utilizando dos servicios y esa parte funciona bien.

servicio-principal.service.ts

llamadaGet(url2: string, datosLlamada: any) {

    return this.http.get(ServicioPrincipal.myUrl+url2, datosLlamada);

}

servicio-secundario.service.ts

getDatos () {

    const myParametros = {parametro1: 'texto1', parametro2: 'texto2'};
    
    return this.sesionServ.peticionGet('textoUrl/texto', myParametros);
    
}

Despues los llamo desde un componente y haciendo un console.log los datos se muestran, pero los envió a un componente hijo y ahí no se ven(en el componente hijo).

componente1.component.html

<componente-hijo [datos]="myDatos">

componente1.component.ts

constructor(private servicioPrincipal: ServicioPrincipal, private servicioSecundario: ServicioSecundario) {

    this.ServicioSecundario.getDatos()
    .subscribe((data: any) => {
      console.log(data); // Aqui si se muestran los datos
      this.myDatos = data;
    });

}

componenteHijo.component.html (Aquí es donde no se muestran los datos)

<p *ngFor="let registro of _datos">{{registro.campo1}} {{registro.campo2}}</p>

componenteHijo.component.ts

@Input() datos: any[] = [];
ngOnChanges() {
  console.log(this.datos);
}

Si envió datos en bruto al componente hijo(sin hacer una petición http) si se muestran.

Edición: Al hacer el ngOnChanges() los datos se muestran en el hijo pero no pasan a la vista.

Agradecería vuestra ayuda.

Gracias de Antemano.

6
  • 1
    No veo motivos para que no funcione el código que has puesto. ¿Has probado a añadir un método ngOnChanges en el componente hijo y comprobar que se llama después de obtener los datos? Commented el 9 dic. 2020 a las 9:08
  • He editado la pregunta con las pruebas que dices.
    – ivanao
    Commented el 9 dic. 2020 a las 9:21
  • ¿Y no hay ningún error en la consola? Commented el 9 dic. 2020 a las 10:28
  • no, el array se muestra bien con el console.log(dentro del ngOnChanges) de la variable pero no entiendo porque no pasa a la vista, es como si no tuviera data binding la variable, podría intentar forzar a copiar los datos a otra variable en el ngOnChanges pero no me parece la forma correcta de hacer las cosas en un framework como angular.
    – ivanao
    Commented el 9 dic. 2020 a las 10:37
  • Tengo creado un ejemplo aquí donde el paso por Inputs funciona sin problema, sin necesidad de hacer nada cuando se actualiza el Input... tiene que haber algo fuera de ese código que muestras que impide el funcionamiento y se nos está pasando por alto. Commented el 9 dic. 2020 a las 13:13

1 respuesta 1

1

Finalmente descubri que el eroor no estaba relacionadado con la llamada http, sino con que los datos que se muestran en la vista estan filtrados mediante una función y que esta debe llamarse con cada cambio de los datos de origen para que estos se actualicen:

componenteHijo.component.html

<p *ngFor="let registro of _datos">{{registro.campo1}} {{registro.campo2}}</p>

componenteHijo.component.ts

ngOnInit(): void {

    this.filtro();  
    
}

filtro() {

   this._datos = this.filtrado.transform(this.datos,this.palabra);

}

ngOnChanges() {

    this.filtro();

}

Y para que sea mas eficiente

ngOnChanges(changes: SimpleChanges) {

    if (changes.datos && changes.datos.currentValue) {

      this.filtro();

    }

}

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.