如何使用从angular服务导入的数据绘制谷歌图表

Question

我正在使用谷歌图表，谷歌的数据是通过express从mongodb中提取的我在使用角度服务提取的数据时遇到错误

这是system.service.ts

import { Injectable } from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {map} from 'rxjs/operators';
import {SystemValue} from './system-value.model';
import { Observable } from 'rxjs';
import {TruthValue} from './truth_value.model';
@Injectable({
providedIn: 'root'
})
export class SystemValueService {
selectedSystemValue ! :SystemValue;
systemValues !: SystemValue[];
readonly systemURL ="http://localhost:3000/office/system_values";
readonly truthURL="http://localhost:3000/office/truth_values"
constructor(public http:HttpClient) {
}
getSystemValue()
{
return this.http.get(this.systemURL);
}
getTruthValue()
{
return this.http.get(this.truthURL);
}
}

这是我的组件文件

import { Component, OnInit } from '@angular/core';
import {GoogleChartService} from '../service/google-chart.service';
import {SystemValueService} from '../../shared/system-value.service';
import {HttpClient} from '@angular/common/http';
import { viewClassName } from '@angular/compiler';
import { ngxCsv } from 'ngx-csv/ngx-csv';
@Component({
selector: 'app-invalid-iata',
templateUrl: './invalid-iata.component.html',
styleUrls: ['./invalid-iata.component.css']
})
export class InvalidIataComponent implements OnInit {
private gLib:any;
private fig1:any;
private fig2:any;
constructor(private gChartService:GoogleChartService,private http:HttpClient,public systemvalueService:SystemValueService)
{
this.gLib=this.gChartService.getGoogle();
this.gLib.charts.load('current',{'packages':['corechart','table']});
// this.gLib.charts.setOnLoadCallback(drawToolTipCharts);
this.gLib.charts.setOnLoadCallback(this.drawChart.bind(this));
}
ngOnInit() {
// this.fig1=await this.systemvalueService.getSystemValue().toPromise();
//this.fig2=await this.systemvalueService.getTruthValue().toPromise();
this.systemvalueService.getSystemValue().subscribe(data => {
this.fig1 = data;})
this.systemvalueService.getTruthValue().subscribe(data => {
this.fig2 = data;})
}
public mapTable(arrSystem:string[][],arrTruth:string[][])
{ 
let mapList=[['label','cin','xxx','tcc','status']];
var i=1;
while(i<arrSystem.length)
{
var keyvalue=arrSystem[i][1];
var cin="";
var tcc="";
var xxx="";
while( i<arrSystem.length && arrSystem[i][1]==keyvalue)
{
if(arrSystem[i][3]=="CIN")
{
cin=arrSystem[i][4].substring(0,2);
}
else if(arrSystem[i][3]=="XXX")
{
xxx=arrSystem[i][4].substring(0,2);
}
else if (arrSystem[i][3]=="TCC")
{
tcc=arrSystem[i][4];
}
i++;
}
mapList.push([keyvalue,cin,xxx,tcc,""]);
i++;
}
var k=1;
while(k<mapList.length)
{
cin=mapList[k][1];
tcc=mapList[k][3];
xxx=mapList[k][2];
var y=1;
var flag=false;
while(y<arrTruth.length)
{
if(cin==arrTruth[y][0] && tcc==arrTruth[y][2] && xxx==arrTruth[y][1])
{
flag=true;
}
y++;
}
if(flag)
{
mapList[k][4]="valid";
}
else if(flag==false &&cin!="")
{
mapList[k][4]="invalid";
}
k++;
}
return mapList;
}
public pieTable(mapList:string[][])
{

var count1=0;
var count2=0;
for(var i=0;i<mapList.length;i++)
{
if(mapList[i][4]=="valid")
{
count1++;
}
else if(mapList[i][4]=="invalid")
{
count2++;
}
}
return [count1,count2];
}
private system_value()
{
let data_system=this.fig1;
console.log(this.fig1);
var arrSystem=[['object_id','label','amid','office_code','office_value']];
var j=0;
while(data_system[j]!=null)
{
arrSystem.push([data_system[j].object_id,data_system[j].label,data_system[j].amid,data_system[j].office_code,data_system[j].office_value]);
j++;
}
return arrSystem;
}
private truth_value()
{
let data_truth=this.fig2;
var arrTruth=[['iata_code','iata_country','city_code']];
var i=0;
while(data_truth[i]!=null)
{
arrTruth.push([data_truth[i].iata_code,data_truth[i].iata_country,data_truth[i].city_code]);
i++;
}
return arrTruth;
}
private ValidList(mapList:string[][])
{
let validMapList=[['label','cin','xxx','tcc','status']];
for(var i=1;i<mapList.length;i++)
{
if(mapList[i][4]=="valid")
{
validMapList.push(mapList[i]);
}
}
return validMapList;
}
private InvalidList(mapList:string[][])
{
let invalidMapList=[['label','cin','xxx','tcc','status']];
for (var i=1;i<mapList.length;i++)
{
if(mapList[i][4]=="invalid")
{
invalidMapList.push(mapList[i]);
}
}
return invalidMapList;
}
private drawChart()
{

var arrSystem=this.system_value();
var arrTruth=this.truth_value();
var mapList=this.mapTable(arrSystem,arrTruth);
var pieList=this.pieTable(mapList);
var validMapList=this.ValidList(mapList);
var invalidMapList=this.InvalidList(mapList);
var primaryList=[["valid",pieList[0]],["invalid",pieList[1]]];
var options={
title:"Underlying results are",
legend:"none"
}
//var data_valid=new this.gLib.visualization.arrayToDataTable(validMapList);
//var data_invalid=new this.gLib.visualization.arrayToDataTable(invalidMapList);
primaryList[0][2]='<button onClick={}>Valid Data Page</button>'
primaryList[1][2]='<button onClick={}>Invalid Data Page</button>'
this.drawPrimaryChart(primaryList);
}
private drawPrimaryChart(primaryList:(string|number)[][])
{
let chart=new this.gLib.visualization.PieChart(document.getElementById('visible_div'));
let data=new this.gLib.visualization.DataTable();
data.addColumn('string','Status');
data.addColumn('number','Count');
data.addColumn({
type:'string',
label:'Tooltip Chart',
role:'tooltip',
'p':{'html':true}
});
data.addRows(primaryList);
var options = {
title: 'Invalid IATA Values',
theme:'material',
width:600,
height:300,
legend:'none',
tooltip:{isHtml:true,trigger:'selection'}
}; 
chart.draw(data, options);
} 
results_valid(){
var arrSystem=this.system_value();
var arrTruth=this.truth_value();
var mapList=this.mapTable(arrSystem,arrTruth);
var pieList=this.pieTable(mapList);
var validMapList=this.ValidList(mapList);
new ngxCsv(validMapList, 'Valid IATA');
}
results_invalid(){
var arrSystem=this.system_value();
var arrTruth=this.truth_value();
var mapList=this.mapTable(arrSystem,arrTruth);
var pieList=this.pieTable(mapList);
var invalidMapList=this.InvalidList(mapList);
new ngxCsv(invalidMapList, 'Invalid IATA');
}
}

我得到的错误是-->

TypeError: Cannot read property '0' of undefined
TypeError: Cannot read property '0' of undefined
at InvalidIataComponent.system_value (invalid-iata.component.ts:113)
at InvalidIataComponent.drawChart (invalid-iata.component.ts:159)
at ZoneDelegate.invoke (zone-evergreen.js:372)
at Object.onInvoke (core.js:28510)
at ZoneDelegate.invoke (zone-evergreen.js:371)
at Zone.run (zone-evergreen.js:134)
at zone-evergreen.js:1276
at ZoneDelegate.invokeTask (zone-evergreen.js:406)
at Object.onInvokeTask (core.js:28497)
at ZoneDelegate.invokeTask (zone-evergreen.js:405)
at resolvePromise (zone-evergreen.js:1213)
at zone-evergreen.js:1283
at ZoneDelegate.invokeTask (zone-evergreen.js:406)
at Object.onInvokeTask (core.js:28497)
at ZoneDelegate.invokeTask (zone-evergreen.js:405)
at Zone.runTask (zone-evergreen.js:178)
at drainMicroTaskQueue (zone-evergreen.js:582)
at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:491)
at invokeTask (zone-evergreen.js:1600)
at globalZoneAwareCaptureCallback (zone-evergreen.js:1658)

要指出这里的特定行，错误就指向这里var arrSystem=this.system_value((-->while(data_system[j]！=null(

如果有人能告诉我怎么了？此外，代码很少显示结果，但其他时候不会如果我做

this.systemvalueService.getSystemValue().subscribe(data => {
this.fig1 = data;console.log(data)})

然后我在控制台中得到结果。

Answer 1

来自OP的注释：

数据是绝对正确的，因为我可以画出它们的单独表格，我也找到了解决方案。

它主要是存在于构造函数和ngOnit中的一种竞赛条件，所以我所做的是：

async ngOnInit() {
this.fig1 = await this.systemvalueService.getSystemValue().toPromise();
this.fig2 = await this.systemvalueService.getTruthValue().toPromise();
this.gLib.charts.setOnLoadCallback(this.drawChart.bind(this));
}