我尝试使用由Ionic2中的细分受控制的图表(从Chart.js导入),但是当我将图表放入细分市场条件时,会发生以下错误:
运行时错误 this.barCanvas未定义
在细分控制之外,图表效果很好。
这是我的home.ts和home.html文件:
//home.ts file
import {
Component,
ViewChild
} from '@angular/core';
import {
NavController,
Platform
} from 'ionic-angular';
import {
Chart
} from 'chart.js';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
@ViewChild('public barCanvas') public barCanvas;
public barChart: any;
tipoGrafico: string = "geral";
isAndroid: boolean = false;
constructor(platform: Platform) {
this.isAndroid = platform.is('android');
}
ionViewDidLoad() {
this.barChart = new Chart(this.barCanvas.nativeElement, {
//parameters of my graphic...
});
}
}

<!-- home.html file -->
<ion-header>
<ion-navbar no-border-bottom>
<ion-title>
Segments
</ion-title>
</ion-navbar>
<ion-toolbar no-border-top>
<ion-segment [(ngModel)]="tipoGrafico">
<ion-segment-button value="geral">
Geral
</ion-segment-button>
<ion-segment-button value="dipositivo">
Dispositivo
</ion-segment-button>
</ion-segment>
</ion-toolbar>
</ion-header>
<ion-content>
<div [ngSwitch]="tipoGrafico">
<div *ngSwitchCase="'dispositivo'">
-->
<ion-card>
Grafico semana -->
<ion-card-content>
<canvas #barCanvas></canvas>
</ion-card-content>
</ion-card>
</div>
</div>
</ion-content>
<ion-content>
<div [ngSwitch]="tipoGrafico">
<ion-list *ngSwitchCase="'geral'">
<ion-item>
<ion-thumbnail item-start>
<img src="assets/img/teste.jpg">
</ion-thumbnail>
<h2>Geral</h2>
</ion-item>
</ion-list>
</div>
</ion-content>
&#13;
我没有多少能力使用这些语言,所以欢迎任何帮助!