Angular中如何将Observable异步数据转为数组填充ng2-chart

• 核心错误是subscribe回调中使用普通函数声明导致this指向偏移：你在回调里调用this.barChartLabels时，this已经不指向当前组件实例，所以会抛出未定义相关的错误
• 第二种写法直接对Observable类型调用forEach是错误用法，Observable是异步数据流，必须通过subscribe才能拿到流中返回的实际数据
• 不需要额外定义arr、datesarr等临时变量，直接在订阅回调中处理返回的数据集即可

你的场景不需要使用Subject，Firebase返回的valueChanges本身就是支持实时更新的Observable，每次数据库的数据变动都会自动推送给订阅者，刚好匹配你动态更新图表的需求。下面给出两种可行方案：

方案1：手动订阅（适配你现有写法） #

注意要点：

1. 所有回调统一用箭头函数，保证this指向组件实例
2. 每次拿到新数据后先清空旧标签，避免数据残留
3. 记得在组件销毁时取消订阅，避免内存泄漏

首先在组件类中声明订阅对象：

import { Subscription } from 'rxjs';
// 组件类内声明
private entriesSub: Subscription;
public barChartLabels: Label[] = [];

修正后的getEntries方法：

getEntries(id) {
  // 如果已有旧订阅先销毁，避免重复订阅
  if (this.entriesSub) this.entriesSub.unsubscribe();

  this.entriesSub = this.dataService.getEntries(id).subscribe((entries: any[]) => {
    // 先清空旧标签
    this.barChartLabels = [];
    // 直接遍历拿到的数据集填充标签
    entries.forEach(entry => {
      this.barChartLabels.push(entry.Q1 as string);
    });
    // 如果ng2-chart没有自动刷新，可注入ChangeDetectorRef后调用下面的方法触发变更检测（可选）
    // this.changeDetectorRef.markForCheck();
  });
}

在组件销毁钩子中释放订阅：

ngOnDestroy() {
  if (this.entriesSub) this.entriesSub.unsubscribe();
}

方案2：使用Angular async管道（更简洁，无需手动管理订阅） #

Angular会自动处理订阅、销毁逻辑，不需要手动操作流：

import { Observable } from 'rxjs';
// 组件类内声明
entries$: Observable<any[]>;
public barChartLabels: Label[] = [];

getEntries(id) {
  this.entries$ = this.dataService.getEntries(id);
}

在模板中直接配合async管道使用：

<canvas baseChart
  [labels]="(entries$ | async)?.map(entry => entry.Q1) || []"
  <!-- 其他图表配置项 -->
></canvas>

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