使用AGChart处理对象数组时页面无响应问题排查

问题背景 #

我正在使用Angular 17和AG Angular Charts开发项目，希望利用同一组对象数组在独立div中创建水平条形图。实现代码后页面出现无响应情况，请求排查问题。

错误分析 #

• 频繁调用getQues()触发无限变更检测循环：模板中的*ngFor="let ques of getQues()"会在Angular每次变更检测时执行getQues()，而该方法每次返回全新的数组对象。Angular会判定数据持续变化，触发无休止的变更检测，最终导致页面卡死。
• 数据结构不匹配AG Charts要求：getQues()返回的数组元素是嵌套数字键的对象（如{0: [...]}），但AG Charts的data属性需要直接传入数据数组，这种嵌套结构不仅导致图表无法解析数据，还会额外消耗性能。
• 重复调用getQues()浪费性能：ngOnInit循环中多次调用getQues()，每次都生成新数组，属于完全不必要的重复操作。

修复方案 #

步骤1：重构组件数据与逻辑 #

将getQues()的结果提前赋值给组件属性，避免重复生成数组；同时修正数据结构，确保AG Charts能直接读取有效数据。

修复后的TS代码 #

import { Component, OnInit, OnDestroy, Inject, PLATFORM_ID } from '@angular/core';
import { CommonModule, isPlatformBrowser } from '@angular/common';
import { AgChartsAngularModule, AgChartOptions } from 'ag-charts-angular';

@Component({
  selector: 'view-survey',
  templateUrl: './viewsurvey.component.html',
  standalone: true,
  imports: [CommonModule, AgChartsAngularModule],
  providers: [],
})
export class ViewSurveyComponent implements OnInit, OnDestroy {
  public options: AgChartOptions[] = [];
  public isBrowser!: boolean;
  // 预存问题数据，避免重复生成数组
  public questions: any[] = [];

  constructor(@Inject(PLATFORM_ID) private platformId: Object) {
    this.isBrowser = isPlatformBrowser(this.platformId);
    // 初始化时仅获取一次数据
    this.questions = this.getQues();
  }

  ngOnInit() {
    // 基于预存数据生成图表配置
    this.questions.forEach((quesData) => {
      // 提取对象中的数组数据，修正结构
      const data = Object.values(quesData)[0];
      const option: AgChartOptions = {
        data: data,
        series: [
          {
            type: "bar",
            direction: "horizontal",
            xKey: "response",
            yKey: "respcnt",
            yName: "Response Count",
          },
        ],
      };
      this.options.push(option);
    });
  }

  ngOnDestroy() {}

  getQues() {
    return [
      {
        0: [
          { response: "Response 1", respcnt: 80 },
          { response: "Response 2", respcnt: 94 },
        ],
      },
      {
        1: [
          { response: "Response 1", respcnt: 70 },
          { response: "Response 2", respcnt: 62 },
          { response: "Response 3", respcnt: 92 },
        ],
      },
    ];
  }
}

修复后的HTML代码 #

<div 
  style="float:left; border:solid 1px #7CB9E8; border-radius:5px; background-color: white; margin-left: 15%; width:45%; padding: 2%; margin-top: 2%; height: 300px;"
  *ngFor="let ques of questions; let quesIndex = index"
>
  <ag-charts-angular 
    style="height: 100%;" 
    *ngIf="isBrowser" 
    [options]="options[quesIndex]"
  >
  </ag-charts-angular>
</div>

额外优化建议 #

• 给图表容器设置固定高度（如height: 300px），避免图表因高度计算异常出现渲染问题。
• 若后续数据为异步获取，建议使用async管道处理Observable，减少手动数据更新的复杂度。

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