Console punto blog

Angular Viewchild element undefined | 2022 | En español

Me he topado con el problema de cuando intentaba acceder desde el typescript al elemento de una lista de usuarios que hay en la template el Viewchild retornaba undefined.

La solución resultó ser bastante sencilla y lógica, para empezar hay que tener en cuenta que para acceder a un elemento, este tiene que estar cargado, para ello usaremos el Lifecycle de Angular AfterViewInit. Si sigue sin funcionar tiene que ser porque hay algo que, de forma asíncrona que hace que tarde en cargar el elemento. Seguro que el elemento se encuentra dentro de un *ngIf que depende de una promesa o un observable que carga la información de forma asíncrona. Dicho esto pasemos a un resumen de la losución:

Angular 2 @ViewChild annotation returns undefined solved 2022 en español

  • Acceder al elemento Viewchild dentro de AfterViewInit (para que el elemento se haya cargado).
  • Comprobar que el elemento no se encuentre dentro de un *ngIf.
  • Como última solución (un poco chapucera), si todo lo demás no te ha funcionado, acceder al elemento Viewchild dentro de un setTimeout donde le pongas el suficiente tiempo para asegurarte de que el elemento haya cargado.

La solución a este error lo saqué de StackOverFlow: https://stackoverflow.com/a/36488227

¿Te has quedado con ganas de más?