Не удается прочитать свойство 'native-element' из неопределенного

Я использую ионный 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.

Ответ 1

Я думаю, что вы tring, чтобы получить значение из html до полного рендеринга. Если вы попытаетесь напечатать значение нажатием кнопки, оно будет работать.

зависит от вашего кода, который я немного изменил. Пойдем ниже, он работает для меня.

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

Примечание. Если вы не работаете, увеличьте время ожидания и повторите попытку.

Ответ 2

Не указывать тип переменной abc. Он должен выглядеть следующим образом:

 @ViewChild('abc') abc;

Ответ 3

Я думаю, вам следует переместить код с ngAfterViewInit на ngOnInit, чтобы избежать таких проблем и не полагаться на таймаут:

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

Ответ 4

объявите селектор дочернего компонента в HTML-шаблон родительского компонента. В противном случае компонентный объект abc не будет инициализирован во время выполнения для вызова своих функций или открытых свойств в файле parent.ts.

Дочерний компонент abc:

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

В html-шаблоне родительского компонента объявите дочерний селектор:

< child-abc > < /child-abc >

Ответ 5

Лучшим хуком жизненного цикла для использования является AfterContentInit, позволяющий сценариям находить все html-содержимое (например, div #map_canvas).

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

Кроме того, были сделаны некоторые обновления для ViewChild, теперь он принимает второй параметр:

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

Теперь вы можете использовать этот хук для инициализации своей карты:

ngAfterContentInit() {
    this.loadMap();
}