1

Tengo en un componente: un Array de elementos iniciada vacía. En el constructor le añado elementos que me traigo de otra clase, de esta forma:

  elementos: Elemento[] = [];

  constructor(private _elementosService: ElementosService) {

    this.elementos = this._elementosService.getElementos();
  }

Hasta aquí todo bien. Ahora, en el método ngOnInit() simplemente para probar que la lista elementos ha sido cargada, realizo un console.log(this.elementos); y si compilo y veo la consola, en efecto, me devuelve los valores que estoy esperando.

Problema

Dentro de la misma clase tengo varios métodos y en uno de ellos necesito utilizar una propiedad de los elementos que guardo en el Array. Pero dentro del método me indica que los elementos es undefined. Esto es lo que hay en el metodo:

let contenedor = document.getElementById('interior') as HTMLInputElement;
let idElemento: string = e.dataTransfer.getData("Text"); 
let parrafos = document.querySelectorAll('p');

switch(idElemento){

  case "jumbotronJS": {
    contenedor.innerHTML += this.elementos[0].codigo; // Añadir Jumbotron
    break;
  }
  case "parrafoJS": {
    contenedor.innerHTML += this.elementos[1].codigo; // Añadir Parrafo
    break;
  }
  case "cardJS": {
    contenedor.innerHTML += this.elementos[2].codigo; // Añadir Card
    break;
  }
  case "imagenJS": {
    contenedor.innerHTML += this.elementos[3].codigo; // Añadir Imagen
    break;
  }
  case "botonJS": {
    contenedor.innerHTML += this.elementos[4].codigo; // Añadir Boton
    break;
  }
  case "formularioJS": {
    contenedor.innerHTML += this.elementos[5].codigo; // Añadir Formulario
    break;
  }
}

¿Por que en el constructor, y en el ngOnInit mi Array de elementos esta cargada, y cuando la utilizo en otros métodos me la trae como undefined?

Esto es lo que necesito cargar:

this.elementos[0].codigo;
3
  • Hola. Si trabajas directamente el html en angular como lo estas haciendo vas a tener muchos problemas. Angular no detectara los cambios. Ten cuidado. Te recomiendo usar Renderer2
    – Legna
    el 1 jun. 2020 a las 20:49
  • Soy nuevo en Angular, y aun hay cosas que hago a la antigua. No conocía esto, me lo veré bien. Gracias! el 1 jun. 2020 a las 20:55
  • donde esta definido el metodo que intenta acceder a this.elementos? como se invoca?. El hecho de que reporte this.elementos como undefined significa que el metodo fue invocado con otro this
    – Klaimmore
    el 1 jun. 2020 a las 21:23

2 respuestas 2

1

Lo he solucionado. No me estaba detectando la interfaz si la iniciaba en el constructor ni en el ngOnInit. Por lo tanto he tenido que instanciarlo dentro del método:

let _elementoService: ElementosService = new ElementosService();
let elementos = _elementoService.getElementos();

Y de esta forma me lo ha detectado al momento. Aunque solo sera detectable en este método.

1
  • 1
    si haces eso no funcionará la injeccion de dependencias en ElementosService. No te recomiendo eso
    – Klaimmore
    el 1 jun. 2020 a las 21:21
0

debes tener en cuenta el orden de ejecución de tus funciones, el problema puede ser debido a que la función que te trae undefined se ejecute antes de que el array se llene sobre todo si usas innerHTML, creo que puedes solucionar esto poniendo un timeOut a tu función dando tiempo a tu array a cargarse.

setTimeout(() => {
     miFuncion();
    }, 1000);
3
  • El método ngOnInit es el primer que carga la aplicación ante cualquier cosa. Incluso antes que el constructor, por ello no influye, en este caso, el orden de los métodos. el 1 jun. 2020 a las 10:20
  • Falso. El método ngOnInit es un método de tu clase componente... Como cualquier otra clase, primero se ejecuta el constructor. Una vez está la instancia creada, Angular ejecuta el método ngOnInit. Deberías echar un vistazo a la documentación. De todas formas, la respuesta de @WillyAndreu es arbitraria e incorrecta.
    – VRoxa
    el 1 jun. 2020 a las 12:34
  • Cierto. Aun estoy asimilando cosas de Angular y confundo a veces. Gracias por la información. el 1 jun. 2020 a las 20:54

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.