Angular 中的图表直到 windows 调整大小后才会显示

Question

如果有任何解决此问题的方法，请告诉我。 我对使用 chart.js 和 Angular 还是很陌生。当我尝试使用 API 提取图形数据集时，图形似乎隐藏起来，直到我更改 window 大小。我不知道我做错了还是 chart.js 模块有问题。请帮忙，谢谢。

Before resize

After resize

HTML code

TS typescript code

Answer 1

您在调整大小后看到该图表是有原因的，因为您嵌套了 API 调用和 angular change-detection不适用于嵌套函数。这个问题有 2 个解决方案。

1. 您可以展平您的 API 调用并删除嵌套或

2. 您可以使用 changeDetectorRef 通过

   触发变化检测

   constructor(
             private cdr: ChangeDetectorRef
   
   ) {}
   

   计算完成后使用下面的语句。

   this.cdr.markForCheck();

我建议你选择第一个选项。

Answer 2

或许，你可以试试setTimeout。因为图表渲染时，容器没有大小