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

I got this issue to display bar chart in ionic angular 9 project. My issue was resolved after adding timeout function

@ViewChild('barChart') barChart;

ngOnInit() {
  setTimeout(() => {
     this.createBarChart();
   }, 1000);
}


 createBarChart() {

     this.bars = new Chart(this.barChart.nativeElement, {
     type: 'bar',
     data: {
       labels: this.chartLabels,
       datasets: [{
      label: 'Monthly Costings',
      data: [2.5, 3.8],
      backgroundColor: ['rgb(38, 194, 100)', '#548279'],
      borderColor: ['rgb(38, 194, 100)', '#548279'],
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});
}

Answer 2

declare Child component's selector into the Parent component html template. Otherwise, component object abc will not be initialized at runtime to call its functions or public properties at the parent.ts file.

Child Component abc:

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

At parent Component's html template declare child's selector:

< child-abc > < /child-abc >

Answer 3

you can use the ElementRef in conjunction with @ViewChild if you do the following

HTML Markup:

<input type="text" class="form-control" #someNameInput>
<button
  class="btn btn-primary"
  (click)="clickMe()">Click Me</button>

In the Component Code:

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

For older version it's

@ViewChild('someNameInput') someNameInput: ElementRef;

Right before the constructor() method

And here is how you would use it in a function

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

}

If you get some value is undefined, it's usually means that it's a JavaScript issue and you don't have something initialized. Try and take ViewChild out of the equation first and make sure the code works without it first. Then introduce ViewChild into the mix. Kind of like testing your API with postman first then doing the Angular code later. Make sure that backend works first then you know for sure it's the Angular code. Angular has different page life cycles so some values are only available in the onAfterViewInit event and not on other events. So you have to play around with the view cycles. Haven't tried it but I suspect that if you try to get the value of the ViewChild in the ngOnInit method you will get an error or a blank value.

Answer 4

I think you are tring to get the value from html before rendering completely. If you try to print the value in a button click, it will works.

depend on your code I have modified a little.Try the below, it is working for me.

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

Note: If not working, please increase the timeout time and try again.

Answer 5

Do not specify the type of variable abc. It should be like below:

 @ViewChild('abc') abc;

Answer 6

I think you should move your code from ngAfterViewInit to ngOnInit in order to avoid such kind of issues and not rely on timeout:

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