chart.js 在 angular 中没有在 ng-template 中呈现

Question

描述

我已经在 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

Answer 1

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

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

chart.js 在 angular 中没有在 ng-template 中呈现

chart.js not getting rendered inside ng-template in angular

javascript

typescript

chart.js

angular

描述

示例代码