PrimeNG饼图随机显示，并在分辨率变化时显示

问题描述

我正在使用Primeng饼图和来自后端的动态数据。当我使用静态数据时，饼图可以按预期工作，但是现在与动态数据集成之后，它在页面刷新时会随机显示。它会根据屏幕分辨率（即宽度和高度）的变化进行渲染和显示。尝试了多种方法，例如ViewChild，响应度以及为图表设置高度和宽度，但似乎没有一种方法。

chart as default

chart after I clicked toggle device toolbar in dev console and un-clicked it

解决方法

我记得遇到过类似的问题。它与变更检测有关。屏幕分辨率更改会触发更改检测。以及鼠标移动之类的事件（如果您在任何地方都有此事件的处理程序）。

考虑到我看不到代码，我想可能有两种解决方法：

可以完成数据绑定，而无需更改对带有数据的变量的引用。例如使用push方法更新数据源。

// this is not recognized by the change detection mechanism as update because the reference to this.data is not updated
this.resourceService.getResources().subscribe( data => { 
  var counts1 = {};
  this.chartHistory.forEach((x) => {
    counts1[x] = (counts1[x] || 0)+1; 
  });
  for (let i = 0; i < Object.keys(counts1).length; i++) {
    this.chartHistoryData.push(Object.keys(counts1)[i]);
    this.chartHistoryVal.push(Object.values(counts1)[i]);
  }
});

// this would be recognized
this.resourceService.getResources().subscribe( data => { 
  var counts1 = {};
  this.chartHistory.forEach((x) => {
    counts1[x] = (counts1[x] || 0)+1; 
  });
  Object.entries(counts1).forEach(([key,value]) => {
    this.chartHistoryData = [...this.chartHistoryData,key];
    this.chartHistoryVal = [...this.chartHistoryVal,value];
  });
});

作为一种变通办法，也可以在数据更新后触发更改检测。 ChangeDetectorRef.detectChanges()做到了

angular charts primeng