Angular2无法读取未定义的属性'nativeElement'答案

【问题标题】：Angular2 Cannot read property 'nativeElement' of undefinedAngular2无法读取未定义的属性'nativeElement'
【发布时间】：2017-12-15 07:16:57
【问题描述】：

您好，我正在尝试使用 viewChildren 和 elementRef 从 html 获取数据（在 ngFor 之后提取），但我得到了

Cannot read property 'nativeElement' of undefined

我做错了什么？我也在用ngAfterViewInit

这些是我的代码 (html)

<div id="tutor-price" #myDiv (click)="passCharge(r.value['charge'])"><span id="month">8 Times a month</span> <span id="price"> {{r.value['charge']}} </span></div>

组件

import { Component, OnInit, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import { Router } from '@angular/router'


@ViewChild('myDiv') myDiv: ElementRef;

  ngAfterViewInit() {
   let el: HTMLElement = this.myDiv.nativeElement as HTMLElement;
   el.click();
 }

通过以上操作，我想在组件加载完成时自动切换点击事件。

但我遇到了错误。

我做错了什么？

【问题讨论】：

只需在您的代码中将el.click(); 更改为el.click。它将完美运行。
你实现了 AfterViewInit 吗？ class XXX implements OnInit, AfterViewInit
（顺便说一下，和我今天早上提供的代码很像，是这样吗？）

标签： angular data-binding

【解决方案1】：

您将模板变量分配给普通的HTMLElement 而不是组件标签，这将使myDiv 字段属性成为HTMLElement 而不是ElementRef：

@ViewChild('myDiv') 
myDiv: HTMLDivElement;

ngAfterViewInit() {
   el.click();
}

【讨论】：

【解决方案2】：

在 View 初始化后使用 ViewChild 变量，即使用 -

ngAfterViewInit()

【讨论】：