Question

我有一个简单的项目，其中显示有一个Chart.js条形图的离子段。我没有显示图表本身的问题，但是尝试将图表HTML放入Ionic段中会出现以下错误：

ERROR TypeError: Cannot read property 'nativeElement' of undefined
    at HomePage.webpackJsonp.203.HomePage.ionViewDidLoad (home.ts:19)

如果我只是移动<canvas #barcanvas></canvas>并将其放置在.html文档中的几乎其他位置，则该图表会很好地显示，但不在Ionic segment元素内部。

home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <div padding>
    <ion-segment [(ngModel)]="pet">
      <ion-segment-button value="kittens">
        Kittens
      </ion-segment-button>
      <ion-segment-button value="puppies">
        Puppies
      </ion-segment-button>
    </ion-segment>
  </div>

  <div [ngSwitch]="pet">
    <ion-list *ngSwitchCase="'puppies'">
      puppies...
      <canvas #barcanvas></canvas>
    </ion-list>

    <ion-list *ngSwitchCase="'kittens'">
      kittens...
    </ion-list>
  </div>
</ion-content>

home.ts

import { Component, ViewChild } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Chart } from 'chart.js';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  @ViewChild('barcanvas') barcanvas;
  barChart: any;

  constructor(public navCtrl: NavController) {

  }

  ionViewDidLoad() {

    this.barChart = new Chart(this.barcanvas.nativeElement, {

      type: 'bar',
      data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
          label: '# of Votes',
          data: [12, 19, 3, 5, 2, 3],
          backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(255, 206, 86, 0.2)',
            'rgba(75, 192, 192, 0.2)',
            'rgba(153, 102, 255, 0.2)',
            'rgba(255, 159, 64, 0.2)'
          ],
          borderColor: [
            'rgba(255,99,132,1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(75, 192, 192, 1)',
            'rgba(153, 102, 255, 1)',
            'rgba(255, 159, 64, 1)'
          ],
          borderWidth: 1
        }]
      }

    });

  }
}

Answer 1

如果您使用的是Angular> = 8，现在必须将第二个参数传递给Viewchild以获取选项并设置为static：true

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

Answer 2

在home.ts中，您将条形图加载到ionViewDidLoad中，因此，如果您想以这种方式放置它，您无法将其放入该段中，因为该段将无法读取ionViewDidLoad内部数据，因为在执行ionViewDidLoad函数之后还加载了该段，否则，如果您希望将其放入该段中，您应该从ionViewDidLoad（）中取出数据并将其放入其他函数中，因此您可以将函数直接放入段中，这样该段就可以读取该函数。

Answer 3

ionViewDidLoad（）不要使用它。只需使用以下命令即可： ionViewDidEnter（）。

Ionic / Chart.js-无法读取未定义的属性“ nativeElement”

3 个答案: