web-dev-qa-db-fra.com

Impossible de lire la propriété 'nativeElement' de non définie

J'utilise ionique 2.

J'ai besoin d'obtenir la valeur htmlelement.

En fait, j'ai utilisé viewchild.

Voici mon code de modèle 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>

la valeur chat.date est la valeur de la base de feu. J'accède à cet élément. Mais je n'ai pas eu la valeur d'élément.

Voici mon composant

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);

      }
    }

J'ai référé ce lien Comment puis-je sélectionner un élément dans un modèle de composant?

J'ai essayé de beaucoup de chemin.

Mais j'obtiens cette erreur

Cannot read property 'nativeElement' of undefined.
angulartypescriptionic2
10
ANISUNDAR

Je pense que vous essayez d’obtenir la valeur du code HTML avant d’effectuer un rendu complet. Si vous essayez d'imprimer la valeur en un clic de bouton, cela fonctionnera.

dépendez de votre code que j'ai modifié un peu.Essayez le ci-dessous, cela fonctionne pour moi.

  ngAfterViewInit() {
    console.log("afterinit");
    setTimeout(() => {
      console.log(this.abc.nativeElement.innerText);
    }, 1000);
  }

Remarque: Si cela ne fonctionne pas, veuillez augmenter le délai d'attente et réessayer.

22
Sabari

Ne spécifiez pas le type de variable abc. Ce devrait être comme ci-dessous:

 @ViewChild('abc') abc;
2
Yuvraj Patil

déclarer le sélecteur du composant enfant dans le modèle html du composant parent. Sinon, l'objet composant abc ne sera pas initialisé au moment de l'exécution pour appeler ses fonctions ou ses propriétés publiques dans le fichier parent.ts.

Composant enfant abc:

@Component({
    selector: 'child-abc',
    templateUrl: './abc.component.html',
    styleUrls: ['./abc.component.css'],
})

Dans le modèle html du composant parent, déclarez le sélecteur de l'enfant:

< child-abc > < /child-abc >
0
Jasmin Akther Suma

Je pense que vous devriez déplacer votre code de ngAfterViewInit à ngOnInit afin d'éviter ce genre de problème et de ne pas compter sur le délai d'attente:

ngOnInit(){
  console.log("afterinit");
  console.log(this.abc.nativeElement.value);   
}
0
Prerak Tiwari