javascript - 如何在构造函数中加载数据，并在 ngAfterViewInit 中通过 Chartjs 渲染它？

Question

这是我的问题。许多在 Angular 中使用 Chartjs 的例子只假设 data is already there ，并在 ngAfterViewInit 中呈现它。

但是，我不知道如何满足我的要求:

• 我需要在构造函数中加载数据
• 在加载数据时，我设置了一个 bool 属性以显示不确定的 mat-spinner
• 当然，加载数据确实是不确定的，我不知道它什么时候加载(也许是希望之地)
• 加载数据时，我需要使用Chartjs API将数据绘制到canvas中
• 如果我在构造函数中执行此操作，则会遇到 document.getElementById('canvasId') 的空引用，因为它尚未呈现。
• 如果我在构造函数中加载数据并想在 ngAfterViewInit 中呈现 Canvas ，那么我不知道数据何时加载，因为它是不确定的，而且我遇到了对我的数据属性的空引用对象。
• 如果我在 ngAfterViewInit 中加载数据，那么 Angular 会提示 ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked。以前的值:“ngIf:未定义”。当前值:'ngIf: true'。此错误与 mat-spinner *ngIf='progress'
有关

此时我对如何协调这些要求感到困惑。有帮助吗？

Answer 1

这篇文章使用服务获取数据并在加载数据后呈现图表。希望对您有所帮助!

Angular Load Data from Service

我收到表达式更改错误，但在 OnInit 中加载和执行对我有用。