web-dev-qa-db-ja.com

未定義のプロパティ 'native-element'を読み取れません

ionicを使用しています2。

HTML要素の値を取得する必要があります。

実際、viewchildを使用しました。

ここに私の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>

chat.date値はfirebase値です。この要素にアクセスします。しかし、要素の値を取得できませんでした。

ここに私のコンポーネントがあります

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

      }
    }

このリンクを参照しました コンポーネントテンプレートで要素を選択するにはどうすればよいですか？

私は多くの方法で試しました。

しかし、私はこのエラーを受け取っています

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

完全にレンダリングする前に、htmlから値を取得しようとしていると思います。ボタンのクリックで値を印刷しようとすると、機能します。

私が少し修正したコードに依存します。以下を試してください、それは私のために働いています。

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

注：動作しない場合は、タイムアウト時間を増やして再試行してください。

30
Sabari

変数abcのタイプを指定しないでください。以下のようになります。

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

子コンポーネントのセレクターを親コンポーネントのHTMLテンプレートに宣言します。そうでない場合、コンポーネントオブジェクトabcは実行時に初期化されず、parent.tsファイルでその関数またはパブリックプロパティを呼び出しません。

子コンポーネントabc：

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

親コンポーネントのhtmlテンプレートで、子のセレクターを宣言します。

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

この種の問題を回避し、タイムアウトに依存しないようにするには、コードをngAfterViewInitからngOnInitに移動する必要があると思います。

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

使用するのに最適なライフサイクルフックはAfterContentInitであり、すべてのhtmlコンテンツ（#map_canvas divなど）をスクリプトで検出できるようにします。

import { AfterContentInit, ViewChild } from '@angular/core';

また、ViewChildにいくつかの更新が行われ、2番目のパラメーターを受け取ります。

@ViewChild('map_canvas', {static: false}) map_canvas: ElementRef;

これで、そのフックを使用してマップを初期化できます。

ngAfterContentInit() {
    this.loadMap();
}
0
Grant