Ionic / Chart.js - Невозможно прочитать свойство 'nativeElement' из неопределенного - PullRequest
Новая
       5

Ionic / Chart.js - Невозможно прочитать свойство 'nativeElement' из неопределенного

0 голосов
/ 20 января 2019

У меня есть простой проект, который отображает ионный сегмент, в котором есть диаграмма 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, диаграмма будет отображаться красиво, но не внутри элемента ионного сегмента.

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
        }]
      }

    });

  }
}

1 Ответ

0 голосов
/ 20 января 2019

В home.ts вы загружаете панель в ionViewDidLoad, так что, если вы хотите поставить ее таким образом, вы не можете поместить его в сегмент, так как сегмент не сможет прочитать внутренние данные ionViewDidLoad, поскольку сегмент также загружается после выполнения функции ionViewDidLoad, иначе, если вы хотите поместить его в сегмент, Вы должны извлечь данные из ionViewDidLoad () и поместить их в другую функцию, и, следовательно, вы можете поместить функцию непосредственно в сегмент, и, таким образом, функция может быть прочитана сегментом.

...