0

hoy tengo este problema que es sencillo pero no logro solucionar en angular 14, Tengo un arreglo que guarda el nombre de pacientes el cual es el siguiente:

pacienteNombre: String[] = ['Luis Daniel', 'Jose Carlos', 'Luisa Martinez'];

En mi componente html lo recorro con un *ngFor en una etiqueta li:

    <ol>
    <li class="paciente" *ngFor="let patient of pacienteNombre">{{patient}}</li>
    </ol>

En la pagina se muestra bien el despliege de los 3 nombres, pero cuando quiero acceder a una posicion en especifico en el componente.ts me marca que esta indefinido, utilizo getElementsByClassName para que me regrese la coleccion de li creados y poder acceder pero me sale indefinido:

 posicion: any;

 this.posicion = document.getElementsByClassName("paciente")
 console.log(this.posicion[0]);

Estructura component.ts:

    import { Component, OnInit} from '@angular/core';


@Component({
  selector: 'app-registro',
  templateUrl: './registro.component.html',
  styleUrls: ['./registro.component.css']
})
export class RegistroComponent implements OnInit{
  

  constructor(){}
   
  pacienteNombre: String[] = ['Luis Daniel', 'Jose Carlos', 'Luisa Martinez'];
  posicion: any;

  ngOnInit() {
   
    this.posicion = document.getElementsByClassName("paciente")
    console.log(this.posicion[0]);


  }
}

Si me pudieran orientar, lo agradeceria mucho, de ante mano gracias por leer,buen dia.

7
  • ¿En qué momento del lifecycle estás haciendo el query de los elementos?
    – Jacobo
    Commented el 2 ago. 2022 a las 19:58
  • Hola, buen dia!, lo hago después de que los elementos se recorran :D Commented el 2 ago. 2022 a las 20:06
  • incluye la estructura de tu componente.ts
    – fredyfx
    Commented el 2 ago. 2022 a las 20:25
  • Claro que si!:) Commented el 2 ago. 2022 a las 20:40
  • Listo amigo, ya quedo Commented el 2 ago. 2022 a las 20:43

1 respuesta 1

0

El problema principal es que estás intentando leer el DOM en el evento OnInit.

Cuando se ejecuta OnInit el DOM aún no ha sido representado, así que no puede encontrar el elemento.

Existe otro evento que es ngAfterViewInit que se ejecuta cuando ya se ha mostrado la vista y es el que deberías utilizar. Hazlo de esta manera

  1. Importa AfterVieInit desde el core de Angular

  2. Haz que la clase lo implemente

  3. Crea el evento ngAfterViewinit y ejecuta ahí tu código

    import { Component, OnInit, AfterViewInit } from '@angular/core';
    
    @Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.css']
    })
    export class AppComponent implements OnInit, AfterViewInit {
        pacienteNombre: String[] = ['Luis Daniel', 'Jose Carlos', 'Luisa Martinez'];
        posicion: any;
    
        ngOnInit() { }
    
        ngAfterViewInit(): void {
            this.posicion = document.getElementsByClassName("paciente")
            console.log(this.posicion[0]);
        }
    }
    

Por otro lado, esta práctica de acceder directamente al DOM está totalmente desaconsejada en Angular ya que puede interferir con el funcionamiento del propio Angular, con resultados inesperados.

En este caso te recomendaría utilizar variables de plantilla para acceder a los elementos de la vista. Si no sabes cómo hacerlo (no voy a extenderme aquí explicándolo por ser muy extenso), puedes seguir mi curso de Angular que he iniciado recientemente en Youtube. Puedes encontrar el link en mi perfil.

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.