无法读取未定义的属性 'native-element'

17 浏览
0 Comments

无法读取未定义的属性 'native-element'

我正在使用Ionic 2。\n我需要获取HTML元素的值。\n实际上，我使用了ViewChild。\n这是我的HTML模板代码：\n

       {{last ? callFunction() : ''}} 
     
{{chat.date | amDateFormat:'LL'}}                 
              {{checkdate()}}

\nchat.date的值是来自Firebase的值。我访问了这个元素。但是我没有得到元素的值。\n这是我的组件：\n

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

\n我参考了这个链接How can I select an element in a component template?\n我尝试了很多方法。\n但是我得到了这个错误：\n

Cannot read property 'nativeElement' of undefined.

0

3 答案

0 Comments

问题的原因是在Angular 7及以下版本中，@ViewChild不接受{static: false}作为第二个参数。解决方法是通过一个计时器来延迟加载地图。

在Angular中，@ViewChild装饰器用于获取对模板中的元素的引用。在问题中，#map_canvas div是一个地图容器。

为了确保在脚本中可以找到所有的HTML内容，建议使用AfterContentInit生命周期钩子。在该钩子中，可以通过@ViewChild装饰器获取对

元素的引用。

在解决方法中，需要注意两个方面。首先，需要导入AfterContentInit和ViewChild。其次，需要在@ViewChild装饰器中传入一个对象，其中包含{static: false}作为第二个参数。

在ngAfterContentInit方法中，可以调用this.loadMap()方法来初始化地图。

然而，这种解决方法只适用于Angular 8及以上版本。在Angular 7及以下版本中，仍然会遇到相同的错误。解决方法是使用一个计时器来延迟加载地图，这是根据问题的最佳回答提出的建议。

通过以上解决方法，可以解决出现(Cannot read property 'native-element' of undefined)的问题。

0
0 Comments

问题原因：此问题的出现可能是由于在组件代码中对ElementRef进行错误的使用或初始化不当导致的。

解决方法：可以尝试以下解决方法来解决此问题。

首先，在HTML标记中添加一个input元素并为其添加一个引用名称。

然后，在组件代码中，在constructor()方法之前，使用ViewChild装饰器来获取对此引用的访问权限。

对于较新的版本，代码如下：

@ViewChild('someNameInput', { static: true }) someNameInput: ElementRef;

对于旧版本，则不需要static选项：

@ViewChild('someNameInput') someNameInput: ElementRef;

最后，在需要使用该引用的函数中，可以通过访问nativeElement属性来获取该元素的值。例如：

clickMe() {
  console.log(this.someNameInput.nativeElement.value);
}

如果您得到"value is undefined"的错误，通常意味着存在JavaScript问题，可能是因为某些值未初始化。在使用ViewChild之前，可以先将其排除在外，确保代码可以正常工作。然后再引入ViewChild。就像先使用postman测试API，然后再编写Angular代码一样。确保后端工作正常后，您就可以确定问题是在Angular代码中。Angular有不同的页面生命周期，某些值只在onAfterViewInit事件中可用，而在其他事件中不可用。因此，您需要尝试不同的视图生命周期。尚未尝试过，但我怀疑如果您在ngOnInit方法中尝试获取ViewChild的值，可能会出现错误或空值。

0
0 Comments

在这段对话中，讨论了一个关于“Cannot read property 'native-element' of undefined”问题的出现原因和解决方法。根据讨论内容整理如下：

问题出现的原因是在渲染完成之前，尝试从HTML中获取值。如果在按钮点击事件中打印该值，是可以正常工作的。

为了解决这个问题，根据代码进行了一些修改。修改后的代码如下所示：

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

需要注意的是，如果还是不起作用，请增加超时时间再试一次。

某些情况下这不是一个好的解决方案，因为问题出现在*ngIf语句和组件的生命周期上。如果画布在DOM中，ngAfterViewInit应该能够分配元素引用，但设置超时是一种不可测试的、可怕的做法。

还某些情况下在Angular 9中增加超时时间仍然出现错误，并询问有何建议。对此，有人建议永远不要将setTimeout用于除了改善用户体验之外的任何其他目的。这样做的问题在于所有的服务器运行效率都不同，如果在多台计算机上运行相同的代码，超时时间能起作用是无法保证的。因此，这种做法是不好的。几乎每次看到它被使用时，要么是对竞争条件的回避，要么是对以正确的方式处理异步数据的回避，要么是对生命周期钩子的不理解和不正确实现。

通过整理上述讨论内容，我们可以得出结论，解决这个问题的方法是在ngAfterViewInit生命周期钩子中使用setTimeout来延迟获取HTML值。然而，这种方法并不理想，因为它是一种不可测试的、不可取的做法。在实际开发中，应该更好地理解和正确使用组件的生命周期钩子，并避免使用setTimeout来解决异步数据的问题。

0