ng2-charts仅在光标处于特定位置时刷新的问题求助

看起来你遇到的是Angular变更检测未触发图表更新的典型问题，异步数据更新后没被自动检测到，只有侧边栏交互触发视图变更时才顺带更新了图表。我给你两个可行的解决方案：

方案1：手动触发变更检测 #

ng2-charts依赖Angular的变更检测机制来更新图表，有时候异步回调里的数据更新可能不会被自动捕获。你可以通过ChangeDetectorRef强制触发检测：

首先导入并注入ChangeDetectorRef：

import { ChangeDetectorRef, AfterViewInit, Component } from '@angular/core';

@Component({
  // 你的组件元数据
})
export class YourComponent implements AfterViewInit {
  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 cdr: ChangeDetectorRef // 注入ChangeDetectorRef
  ) { }

  ngAfterViewInit() {
    this.fs.getWorkoutRatings(this.wName).valueChanges().subscribe(res => {
      this.ratings = [...res]; // 用扩展运算符创建新数组，确保引用变化
      console.log("data received");
      this.spiderChartData = [ 
        {label: "",fill:false, scaleShowLabels : false, borderWidth:5, fillColor: "rgba(220,220,220,0.2)", data: this.ratings} 
      ];
      this.cdr.detectChanges(); // 强制触发变更检测
    });
  }
}

方案2：使用async管道（推荐） #

这种方式更符合Angular的最佳实践，它会自动管理Observable的订阅、取消订阅，还能自动触发变更检测，避免内存泄漏：

首先在组件中定义Observable并转换数据：

import { Observable } from 'rxjs';
import { map, startWith } from 'rxjs/operators';
import { OnInit, Component } from '@angular/core';

@Component({
  // 你的组件元数据
})
export class YourComponent implements OnInit {
  public spiderChartData$: Observable<any[]>;
  private defaultChartData = [ 
    {label: "",fill:false, scaleShowLabels : false, borderWidth:5, fillColor: "rgba(220,220,220,0.2)", data: [30,30,30,30,30]} 
  ];

  constructor(private fs: FirebaseService) { }

  ngOnInit() {
    this.spiderChartData$ = this.fs.getWorkoutRatings(this.wName).valueChanges().pipe(
      map(res => {
        const ratings = [...res];
        return [ 
          {label: "",fill:false, scaleShowLabels : false, borderWidth:5, fillColor: "rgba(220,220,220,0.2)", data: ratings} 
        ];
      }),
      startWith(this.defaultChartData) // 设置初始默认值
    );
  }
}

然后在HTML模板中使用async管道绑定数据：

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

问题根源说明 #

你提到单页项目中正常，但带侧边栏的页面只有hover才更新——这是因为hover侧边栏触发了Angular的变更检测（比如鼠标事件导致的视图更新），而你的异步数据更新没有自动触发检测。上面两种方案都能直接解决这个触发问题，其中async管道是更优雅的长期解决方案。

内容的提问来源于stack exchange，提问作者Athos