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.