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.
El mejor enlace de ciclo de vida para usar es AfterContentInit, permite que los scripts encuentren todo el contenido html (como el div #map_canvas ).
import { AfterContentInit, ViewChild } from '@angular/core';Además, se han realizado algunas actualizaciones en ViewChild, ahora toma un segundo parámetro:
@ViewChild('map_canvas', {static: false}) map_canvas: ElementRef;Ahora puedes usar ese gancho para inicializar tu mapa:
ngAfterContentInit() { this.loadMap(); }