Estoy usando iónico 2.
Necesito obtener el valor del elemento HTML.
En realidad, usé viewchild.
Aquí está mi código de plantilla html
<div class="messagesholder" *ngFor="let chat of chatval | orderby:'[date]'; let last = last"> {{last ? callFunction() : ''}} <div *ngIf="chat.sender == currentuser || chat.receiver == currentuser"> <p class="chat-date" id="abc" #abc>{{chat.date | amDateFormat:'LL'}}</p> {{checkdate()}} </div>El valor de chat.date es el valor de base de fuego. Accedo a este elemento. Pero no obtuve el valor del elemento.
Aquí está mi componente
import {Component, ElementRef,ViewChild, OnInit} from '@angular/core'; export class ChatPage { @ViewChild(Content) content: Content; @ViewChild('abc')abc: ElementRef; constructor(){} ngAfterViewInit(){ console.log("afterinit"); console.log(this.abc.nativeElement.value); } }Remití este enlace ¿Cómo puedo seleccionar un elemento en una plantilla de componente?
Lo intenté de muchas maneras.
Pero estoy recibiendo este error
Cannot read property 'nativeElement' of undefined.Creo que está tratando de obtener el valor de html antes de renderizar por completo. Si intenta imprimir el valor con un clic de botón, funcionará.
depende de su código, lo he modificado un poco. Pruebe lo siguiente, está funcionando para mí.
ngAfterViewInit() { console.log("afterinit"); setTimeout(() => { console.log(this.abc.nativeElement.innerText); }, 1000); }Nota: Si no funciona, aumente el tiempo de espera y vuelva a intentarlo.
puede usar ElementRef junto con @ViewChild si hace lo siguiente
Marcado HTML :
<input type="text" class="form-control" #someNameInput> <button class="btn btn-primary" (click)="clickMe()">Click Me</button>En el código de componente:
@ViewChild('someNameInput',{static: true}) someNameInput: ElementRef;Para la versión anterior es
@ViewChild('someNameInput') someNameInput: ElementRef;Justo antes del método constructor()
Y así es como lo usarías en una función.
clickMe(){ console.log(this.someNameInput.nativeElement.value);}
Si obtiene algún valor no definido, generalmente significa que es un problema de JavaScript y no tiene algo inicializado. Intente sacar ViewChild de la ecuación primero y asegúrese de que el código funcione sin él primero. Luego introduzca ViewChild en la mezcla. Algo así como probar su API con el cartero primero y luego hacer el código Angular más tarde. Asegúrese de que el backend funcione primero y luego estará seguro de que es el código Angular. Angular tiene diferentes ciclos de vida de página, por lo que algunos valores solo están disponibles en el evento onAfterViewInit y no en otros eventos. Así que tienes que jugar con los ciclos de vista. No lo he probado, pero sospecho que si intenta obtener el valor de ViewChild en el método ngOnInit, obtendrá un error o un valor en blanco.
Tenga en cuenta para aquellos que se preguntan, al usar ViewChild en Angular más nuevo (8+), es posible que obtenga este error si está tratando de usar ViewChild en un objeto representado dinámicamente mientras usa la bandera estática.
ejemplo: @ViewChild('someSection',{ static: false }) someSection: ElementRef;
La opción { static: true } se introdujo para admitir la creación de vistas incrustadas sobre la marcha. Cuando está creando una vista de forma dinámica y desea acceder a TemplateRef, no podrá hacerlo en ngAfterViewInit, ya que provocará un error ExpressionHasChangedAfterChecked. Establecer el indicador estático en verdadero creará su vista en ngOnInit.
Crédito a Poul Krujit aquí por señalar esto: ¿Cómo debo usar la nueva opción estática para @ViewChild en Angular 8?