在html和angular上使用canvas的动态id

Question

我想设置一个动态id为我的报告(画布)在我的HTML与角，但我得到一个错误，如果你可以帮助我请，这是我的类和我的HTML的代码

export class CardKPIReporteComponent implements OnInit {
@BlockUI() blockUI: NgBlockUI;
@Input() datos_kpi_reporte: any
fetcher: any
arrayListaKpis: any
tituloreporte: any
id: any = 1
chartBienesUbicacion: any;
constructor(private procesoOperacionService: ProcesoOperacionesService
) {
}
ngOnInit() {
this.tituloreporte = this.datos_kpi_reporte.servicio_nombre
this.id = this.datos_kpi_reporte.cont //this.id = 1
this.Grafico2();
}
Grafico2() {
// this.id = this.datos_kpi_reporte.cont
var nombrechart = "Reporte" + this.datos_kpi_reporte.cont
this.chartBienesUbicacion = new Chart(nombrechart, {
type: 'pie',
data: {
labels: ['ENTREGADO', 'NO ENTREGADO', '1', '1'],
datasets: [
{
label: 'Cantidad',
data: ['1', '1', '1', '1'], // this.chartsTotal,
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor:
'rgba(54, 162, 235, 1)',
borderWidth: 1
}
]
},
options: {
title: {
text: nombrechart,
display: true
},
scales: {
yAxes: [
{
ticks: {
beginAtZero: true
}
}
]
}
}
});
}
}

<mat-card-content>
<!--<app-alert></app-alert> -->
<div class="row">
<canvas id="Reporte{{ this.id }}"></canvas>
</div>
</mat-card-content>

我一直在尝试这种方式，但我得到这个错误:" chart .js:8459创建图表失败:不能从给定的项目获取上下文">

Answer 1

发生这种情况是因为您试图在模板中设置id之前添加画布。您需要在模板中设置ID，然后在视图初始化之后添加您的图表。

确保你实现了AfterViewInit并更新了你的代码。

ngOnInit() {
this.tituloreporte = this.datos_kpi_reporte.servicio_nombre
this.id = this.datos_kpi_reporte.cont
}
ngAfterViewInit() {
this.Grafico2();
}