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

Question

这是我的问题。很多在 Angular 中使用 Chartjs 的例子只假设数据已经存在，并且他们在ngAfterViewInit.

但是，我无法弄清楚如何满足我的要求：

• 我需要在构造函数中加载数据
• 在加载数据时，我设置了一个布尔属性来显示不确定的mat-spinner
• 当然，加载数据确实是不确定的，我不知道它什么时候加载（promise land 可能）
• 加载数据时，我需要使用 Chartjs API 将数据绘制到画布中
• 如果我在构造函数中执行此操作，那么我会遇到 null 引用document.getElementById('canvasId')，因为它尚未呈现。
• 如果我在 constrcutor 中加载数据并想在 中渲染画布ngAfterViewInit，那么我不知道何时加载数据，因为它是不确定的，并且我遇到了我的数据对象属性的空引用。
• 如果我在 中加载数据ngAfterViewInit，那么 Angular 会抱怨ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ngIf: undefined'. Current value: 'ngIf: true'. 此错误与mat-spinner *ngIf='progress'

我被困在如何协调这些要求上。有什么帮助吗？

标签： javascriptangulardata-visualization

Answer 1

这篇文章使用服务来获取数据并在加载数据后呈现图表。希望能帮助到你！

来自服务的角载荷数据

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