我正试图在函数调用后绘制图表。我收到这个是一个错误:
TypeError: Cannot read property 'nativeElement' of undefined
以下是我的 HTML 文件:
<ion-content>
<ng-template #guest>
<div>
<button ion-button block (click)="auth.googleLogin()"><i class="fa fa-google"></i> Connect Google</button>
<button ion-button block (click)="auth.facebookLogin()"><i class="fa fa-facebook"></i> Connect Facebook</button>
</div>
</ng-template>
<ion-card>
<ion-card-header>
Bar Chart
</ion-card-header>
<ion-card-content>
<canvas #barCanvas></canvas>
</ion-card-content>
</ion-card>
</ng-template>
</ion-content>
和我的 .TS 文件:
@Component({
selector: 'page-drawingchart',
templateUrl: 'drawingchart.html'
})
export class drawingChart{
@ViewChild('barCanvas') barCanvas: ElementRef;
barChart: any;
constructor(public navCtrl: NavController, public auth: AuthService)
{
}
activateChart(objects)
{
this.barChart = new Chart(this.barCanvas.nativeElement,
{
type: 'bar',
data:
{
labels: [objects[0].year, objects[1].year, objects[2].year, objects[3].year],
datasets:
[
{
label: Gender',
backgroundColor: 'rgba(255, 99, 132, 0.2)',
stack: 'Stack 0',
data:
[
objects[0].gender,
objects[1].gender,
objects[2].gender,
objects[3].gender
]
},
{
label: 'Age',
backgroundColor: 'rgba(54, 162, 235, 0.2)',
stack: 'Stack 0',
data:
[
objects[0].age,
objects[1].age,
objects[2].age,
objects[3].age
]
}
]
}
});
}
}
请注意,一旦用户登录并将信息发送到图表功能,就会从另一个类调用函数activateChart。 (对象正确到达)
谢谢!