ng2-chart 仅在光标位于特定位置时刷新

Question

我的 angular2 网络应用程序中有一个页面，其中显示了项目列表。旁边是侧边栏菜单。
选择列表中的一项后，我将显示一个额外的详细视图，其中包括一个绑定到数据数组的雷达图（使用 the ng2-charts library）。由于我正在从数据库中获取要显示的数据，因此使用一些默认数据初始化数组，然后使用可观察的数据进行更新：

public spiderChartData:any = [
    {label: "",fill:false, scaleShowLabels : false, borderWidth:5, 
    fillColor: "rgba(220,220,220,0.2)",
   data: [30,30,30,30,30]}
];
constructor(private fs : FirebaseService) { }
ngAfterViewInit() {
    this.fs.getWorkoutRatings(this.wName).valueChanges().subscribe(res => {
        this.ratings = res.map(x=>x);
        console.log("data received");
        this.spiderChartData = [
            {label: "",fill:false, scaleShowLabels : false, borderWidth:5, 
            fillColor: "rgba(220,220,220,0.2)",
            data: this.ratings;
    });

}

我从日志中可以看出，几乎是立即收到了所需的数据。但是，由于某种原因，直到我将光标移到侧边栏菜单上时，图表才重新绘制；然后图表会立即更新。
我希望图表在收到新数据后立即更新。
我尝试过手动更新图表，甚至销毁并重新绘制图表，但到目前为止还没有成功修复了这个问题。

附加信息

相关html:

<canvas baseChart
    [datasets]="spiderChartData"
    [labels]="spiderChartLabels"
    [chartType]="spiderChartType"
    [options]="spiderChartOptions"
    [colors]="spiderChartColours"
    (chartHover)="chartHovered($event)"
    (chartClick)="chartClicked($event)">
</canvas>

我几乎从我的另一个更简单的项目中复制了图表的所有代码，该项目基本上只是显示此图表的一页。那里的自动更新没有任何问题。
我在分离出用于演示的最小工作示例时遇到了问题，但我希望无论如何有人能够帮助我。

Answer 1

发生这种情况是因为您的 spiderChartData 数组与 Angular 更改检测相同。我的意思是引用不会只改变里面的 data 属性。

Angular 不像 AngularJS 不对值变化进行脏检查；它使用 === 而不是 ==.

来比较变量

所以对于 Angular 到运行变化检测，使用：

    public spiderChartData:any = []; //<--- initialize as empty array to begin with

    constructor(private fs : FirebaseService) { }
    ngAfterViewInit() {
        this.fs.getWorkoutRatings(this.wName).valueChanges().subscribe(res => {
            this.ratings = res.map(x=>x);
            console.log("data received");
            this.spiderChartData = [
                {label: "",fill:false, scaleShowLabels : false, borderWidth:5, 
                fillColor: "rgba(220,220,220,0.2)",
                data: this.ratings;
        });
   }

或

如果你不想将数组初始化为空，那么你需要在 ngAfterViewInit 中调用 ChangeDetectorRef.detectChange() 明确告诉 Angular 到运行变化检测周期。

public spiderChartData:any = [
    {label: "",fill:false, scaleShowLabels : false, borderWidth:5, 
    fillColor: "rgba(220,220,220,0.2)",
   data: [30,30,30,30,30]}
];

 constructor(private fs : FirebaseService
      private _cdRef : ChangeDetectorRef//<--- inject ChangeDetectorRef
      ) { }

    ngAfterViewInit() {
        this.fs.getWorkoutRatings(this.wName).valueChanges().subscribe(res => {
            this.ratings = res.map(x=>x);
            console.log("data received");
            this.spiderChartData = [
                {label: "",fill:false, scaleShowLabels : false, borderWidth:5, 
                fillColor: "rgba(220,220,220,0.2)",
                data: this.ratings;
        });
    this._cdRef.detectChanges(); // <-- tell angular to run cd for this components and it's siblings
       }

ng2-chart 仅在光标位于特定位置时刷新

ng2-chart is only refreshing when cursor is in a certain position

typescript

ng2-charts

angular

附加信息