Cannot read property 'native-element' of undefined

Question

I am using ionic 2.

I need to get HTML element value.

Actually, I used viewchild.

Here is my html template code

        
                      

              相关标签:
       
      

Answer 1

The best lifecycle hook to use is AfterContentInit, allow all of the html content (such as the #map_canvas div) to be found by the scripts.

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

Also, some updates have been made to ViewChild, it now takes a 2nd parameter:

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

Now you can use that hook to initialize your map:

ngAfterContentInit() {
    this.loadMap();
}

Answer 2

Note for those who wonder, when using ViewChild in newer Angular (8+) you might get this error if you are trying to use ViewChild on a dynamically rendered object while using static flag.

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

The { static: true } option was introduced to support creating embedded views on the fly. When you are creating a view dynamically and want to acces the TemplateRef, you won't be able to do so in ngAfterViewInit as it will cause a ExpressionHasChangedAfterChecked error. Setting the static flag to true will create your view in ngOnInit.

Credit to Poul Krujit here for pointing this out: How should I use the new static option for @ViewChild in Angular 8?