chart.js 没有在 ng-template 中以角度呈现答案

【问题标题】：chart.js not getting rendered inside ng-template in angularchart.js 没有在 ng-template 中以角度呈现
【发布时间】：2021-12-15 01:27:53
【问题描述】：

说明

我在ng-template 中声明了chart.js，但图表没有正确呈现

示例代码

<div style="display: block; width: 100%">
  <ng-container *ngTemplateOutlet="qualitySurveyTemp"></ng-container>
</div>

<ng-template #qualitySurveyTemp>
  <canvas id="canvas">{{ chart }}</canvas>
</ng-template>

当我像下面这样使用时它工作正常

<div style="display: block; width: 100%">
  <canvas id="canvas">{{ chart }}</canvas>
</div>

样本 - https://stackblitz.com/edit/angular-chartjs-barchart-sjamlr?file=src%2Fapp%2Fapp.component.html

【问题讨论】：

标签： javascript angular typescript chart.js

【解决方案1】：

似乎是因为您正在尝试在子模板中绘制图表，所以它在 ngOnInit 挂钩中不可用。您可以通过尝试记录document.getElementById('canvas') 来看到这一点，这将返回 null。如果您更改为 ngAfterViewInit 挂钩来创建图表，它可以正常工作：

https://stackblitz.com/edit/angular-chartjs-barchart-uqqnay?file=src%2Fapp%2Fapp.component.ts

【讨论】：