3
votes

Ionic / Chart.js - Impossible de lire la propriété 'nativeElement' de undefined

J'ai un projet simple qui affiche un segment ionique dans lequel il y a un diagramme à barres Chart.js. Je n'ai aucun problème pour afficher le graphique lui-même, mais essayer de placer le graphique HTML dans le segment Ionic me donne l'erreur suivante:

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

    });

  }
}

Si je déplace simplement et placez-le presque n'importe où ailleurs dans le document .html, le graphique s'affiche bien, mais pas à l'intérieur de l'élément de segment Ionic.

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

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

angular chart.js ionic3

0 commentaires

3 Réponses :

0
votes

Dans home.ts, vous chargez la barre dans ionViewDidLoad donc si vous voulez la mettre de cette manière, vous ne pouvez pas le mettre dans le segment car le segment ne pourra pas lire les données internes d'ionViewDidLoad car le segment est également en cours de chargement après l'exécution de la fonction ionViewDidLoad, sinon si vous souhaitez le mettre dans le segment, vous devriez retirer les données de l'ionViewDidLoad () et les mettre dans une autre fonction et donc vous pourriez mettre la fonction directement dans le segment et ainsi la fonction pourrait être lisible par le segment.

3 commentaires

Liste

Maintenant, le problème est que le graphique n'apparaît pas même si ce morceau de code corrige l'erreur.

Je voulais vous demander, pourquoi avez-vous obtenu depuis le début le code en onload, pourquoi ne l'avez-vous pas mis directement dans le constructeur.Essayez de mettre ur xode de function et de le mettre directement dans le constructeur.

0
votes

ionViewDidLoad () ne l'utilisez pas. Utilisez simplement ceci: ionViewDidEnter () .

0 commentaires

1
votes

Si vous travaillez avec Angular> = 8, vous devez maintenant passer un deuxième paramètre à Viewchild pour les options et définir static: true

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

0 commentaires