Google Charts: ERROR TypeError: «c не определено»

avatar
Meenakshi
8 августа 2021 в 16:28
74
1
0

Я использую диаграммы Google для отображения данных Covid из API, и хотя данные загружаются в 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,
    }
  };
}

Я нашел несколько похожих вопросов о переполнении стека, но они были связаны с таблицами данных, и я использую google-charts. Кто-нибудь знает, что это может быть? Если вам нужна дополнительная информация, я буду рад ее предоставить.

Заранее спасибо!

Источник
R. Richards
8 августа 2021 в 16:33
0

Может быть, этот *ngIf=mapReady должен быть *ngIf="mapReady"?

Meenakshi
8 августа 2021 в 16:36
0

@R.Richards, пытался, но не помогает

Ritesh Waghela
8 августа 2021 в 17:42
0

журнал консоли this.states_data выше this.mapReady=true. Какую ценность он имеет?

Meenakshi
9 августа 2021 в 07:10
0

@Ritesh у него есть массив данных

Ответы (1)

avatar
Ritesh Waghela
9 августа 2021 в 15:45
0

Замените компонент кодом ниже:

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);
    });
  }
}