谷歌图表：错误类型错误：“c 未定义”答案

【问题标题】：Google Charts: ERROR TypeError: "c is undefined"谷歌图表：错误类型错误：“c 未定义”
【发布时间】：2021-10-12 14:14:51
【问题描述】：

我正在使用谷歌图表显示来自 API 的 Covid 数据，即使数据是在 ngOnInit() 中加载的，我也收到错误：ERROR TypeError:“c is undefined”。这是我的代码：

import {Component} from '@angular/core';
import { DataService } from "./data.service";

@Component({
  selector: 'app-root',
  template: '<google-chart [data]="geoChart" *ngIf=mapReady></google-chart>',
  styleUrls: ['./app.component.css']  
})
export class AppComponent {
  states_data = [['State','COVID-Confirmed Cases']];
  response: any[]=[];
  mapReady=false;
  constructor(public serv: DataService){}

  ngOnInit(){
    this.serv.getData().subscribe((res)=>{
      console.log(res)
        this.response=res.statewise;
        this.response.splice(0,1);

        for(let state of this.response){
          let temp = [state.state,Number(state.confirmed)];
          if( state.state=="Odisha"){
            temp = ['IN-OR',Number(state.confirmed)];
          }
          this.states_data.push(temp);
        }
        this.mapReady=true
      },
      (err)=>{
        console.log(err)
      }
    );
  }
  
  public geoChart: any = {
    chartType: 'GeoChart',
    dataTable: this.states_data,
    options: {
      region: 'IN', // INDIA
      colorAxis: {colors: ['#00F919', '#0FFFE4', '#1FA20F','#156930','#033E3B']},
      resolution: 'provinces',
      backgroundColor: '#00000',
      datalessRegionColor: '#00000',
      defaultColor: '#00000',
      'height': 600,
    }
  };
}

我在 Stack Overflow 上发现了一些类似的问题，但它们与数据表有关，我正在使用 google-charts。有谁知道可能是什么？如果您需要更多信息，我很乐意提供。

提前致谢！

【问题讨论】：

也许，这个*ngIf=mapReady 应该是*ngIf="mapReady"？
@R.Richards，试过但没有帮助
控制台将 this.states_data 记录在 this.mapReady=true 之上。它有什么价值？
@Ritesh 它得到了数据数组

标签： angular typescript typeerror

【解决方案1】：

用下面的代码替换你的组件：

import {Component} from '@angular/core';
import { DataService } from "./data.service";

@Component({
  selector: 'app-root',
  template: '<google-chart [data]="geoChart" *ngIf="geoChart"></google-chart>',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  states_data = [['State','COVID-Confirmed Cases']];
  response: any[] = [];
  geoChart;
  constructor(public serv: DataService) {}

  ngOnInit() {
    this.serv.getData().subscribe( (res) => {
      if (res && res.statewise) {
          this.response = res.statewise;
          this.response.splice(0, 1);
          for (let state of this.response) {
            let temp = [state.state, Number(state.confirmed)];
            if ( state.state == "Odisha") {
                temp = ['IN-OR', Number(state.confirmed)];
            }
            this.states_data.push(temp);
          }
          this.geoChart = {
              chartType: 'GeoChart',
              dataTable: this.states_data,
              options: {
                region: 'IN', // INDIA
                colorAxis: {colors: ['#00F919', '#0FFFE4',
                        '#1FA20F','#156930','#033E3B']},
                resolution: 'provinces',
                backgroundColor: '#00000',
                datalessRegionColor: '#00000',
                defaultColor: '#00000',
              'height': 600,
              }
            };
        }
    },
    (err) => {
      console.log(err);
    });
  }
}

【讨论】：