Angular动态数据Highcharts页面退出时报forExport属性未定义错误

你出现该错误的核心原因是混用了两种Highcharts初始化逻辑：

• 项目中引入的highcharts-angular组件会内部自动管理图表实例的创建、更新、销毁逻辑
• 你又在异步请求回调中手动调用this.highcharts.chart('container', this.chartOptions)创建了另一个独立的图表实例

两者的实例引用不互通，highcharts-angular自带的ngOnDestroy销毁逻辑尝试访问的是组件内部持有的、从未被正确初始化的实例，因此抛出了Cannot read property 'forExport' of undefined错误。
硬编码数据时不会复现是因为同步初始化的时序刚好覆盖了组件内部的实例引用，而异步请求返回时组件的生命周期已经推进，甚至可能已经进入销毁流程，就会出现实例混乱。

步骤1：调整模板，使用highcharts-angular声明式配置 #

不要手动创建DOM容器再调用Highcharts.chart渲染，直接用组件提供的输入属性控制图表：

<!-- 你的组件HTML文件 -->
<highcharts-chart 
  [Highcharts]="highcharts"
  [options]="chartOptions"
  [(update)]="updateFlag"
  style="width: 100%; height: 400px; display: block;"
></highcharts-chart>

步骤2：调整组件逻辑，移除手动初始化代码 #

仅通过更新chartOptions+触发updateFlag的方式更新图表，同时处理异步订阅的销毁逻辑，避免组件销毁后请求回调仍然执行：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import Highcharts from 'highcharts';
import { Subject, takeUntil } from 'rxjs';

export class WeatherForecastComponent implements OnInit, OnDestroy {
  highcharts: typeof Highcharts = Highcharts;
  chartOptions: Highcharts.Options = { 
    // 初始可以放公共的静态配置，比如图表类型、标题等
    chart: {
      type: 'column'
    },
    title: {
      text: '城市温度统计'
    }
  };
  // 用于通知highcharts-angular组件配置更新
  updateFlag: boolean = false;
  // 用于销毁异步订阅
  private destroy$ = new Subject<void>();

  constructor(private http: HttpClient) { }

  ngOnInit(): void {
    this.http.get<any[]>(`http://localhost:57432/WeatherForecast`, {
        headers: new HttpHeaders({
            "Content-Type": "application/json"
    })})
    .pipe(takeUntil(this.destroy$)) // 组件销毁时自动取消订阅
    .subscribe(result => {
        let categories: string[] = [];
        let dataSeries: number[] = [];
        for (let i = 0; i < result.length; i++) {
            categories.push(result[i]['location']);
            dataSeries.push(result[i]['temperatureC']);
        }
        // 直接更新配置即可，不要手动调用Highcharts.chart
        this.chartOptions.xAxis = {
            categories: categories
        };
        this.chartOptions.series = [{
          type: "column",
          name: "Cities",
          data: dataSeries
        }];
        // 触发更新标记，通知highcharts-angular重绘图表
        this.updateFlag = true;
     }, error => {
         console.log(error);
     });
  }

  ngOnDestroy(): void {
    // 触发订阅销毁
    this.destroy$.next();
    this.destroy$.complete();
  }
}

修改后所有的图表实例逻辑都由highcharts-angular组件统一管理，组件内部的chart引用会指向正确的实例，销毁时不会再出现访问不存在属性的问题。同时添加的takeUntil逻辑可以避免组件销毁后异步请求回调仍然执行，防止出现意外的属性更新。

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