Angular Google Chart - 错误错误：无效的行 #0 尝试将数据与 MongoDB 数据数组绑定时

Question

我正在构建一个 sankey 图表，它将从 MongoDB 数组中获取它的数据，但是当我打开它时返回错误。

ERROR Error: Invalid row #0
at Object.gvjs_ll [as arrayToDataTable]
at GoogleChartComponent.createDataTable
at SafeSubscriber._next
at SafeSubscriber.__tryOrUnsub
at SafeSubscriber.next 
at Subscriber._next 
at Subscriber.next 
at SwitchMapSubscriber.notifyNext
at InnerSubscriber._next 
at InnerSubscriber.next

这是我第一次使用 Google Chart，所以我不确定为什么会出现此错误。 我试着环顾了一下，但没有找到任何解决办法，所以我来这里问。

我使用Here的图表代码

firstchart.component.ts

import { Component, OnInit } from '@angular/core';
import {BackendService} from './../backend.service';

@Component({
  selector: 'firstchart',
  templateUrl: './firstchart.component.html',
  styleUrls: ['./firstchart.component.css']
})
export class FirstchartComponent implements OnInit {

  public data: object[];

  title = '';
  type = 'Sankey';

  columnNames = ['From', 'To', 'Weight'];
  options = {       
  };
  width = 1820;
  height = 740;

  constructor(private myservice: BackendService) {
  }

  ngOnInit() {
    this.myservice.GetList().subscribe(
      (res: any) => { 
        this.data = res["0"]["list"];
      },
      error => { 
      }
    );
  }

}

server.js

const express = require('express');
const bodyParser = require('body-parser');
const mongoose = require('mongoose');
const app = express();
const SLDBModel = require('./sldb_schema');         
require('./db');

app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.urlencoded({ extended: true }))

app.use(function (req, res, next)
{
    res.setHeader('Access-Control-Allow-Origin','*');
    res.setHeader('Access-Control-Allow-Methods','GET, POST, PUT, DELETE');
    res.setHeader('Access-Control-Allow-Headers','content-type, x-access-token');
    res.setHeader('Access-Control-Allow-Credentials', true);
    next();
});

app.get('/api/getList', function (req, res)
{   
    SLDBModel.find({},function(err, data)
    {
        if(err)
        {
            res.send(err);
        }
        else
        {   
            res.send(data.map(v => v.toJSON()));
        }
    });
});

module.exports = app;

app.listen(3000, ()=>
{
    console.log("SERVER IS ONLINE! ON PORT 3000");
})

MongoDB 中的数据

{
    "_id" : ObjectId("5ec4672e44f01dcae82c3dde"),
    "num_rows" : 3,
    "list" : [ 
        {
            "From" : "All Population",
            "To" : "SBOBETH",
            "Weight" : 1,
            "S_NAME" : "SBOBETH",
            "S_ADD" : "sbobeth.com",
            "S_STATUS" : "UP",
            "S_DPV" : 565
        }, 
        {
            "From" : "All Population",
            "To" : "GTRCASINO",
            "Weight" : 1,
            "S_NAME" : "GTRCASINO",
            "S_ADD" : "gtrcasino.com",
            "S_STATUS" : "DOWN",
            "S_DPV" : 1680
        }, 
        {
            "From" : "All Population",
            "To" : "GTRBETCLUB",
            "Weight" : 1,
            "S_NAME" : "GTRBETCLUB",
            "S_ADD" : "gtrbetclub.com",
            "S_STATUS" : "UP",
            "S_DPV" : 4950
        }, 
        {
            "From" : "All Population",
            "To" : "77UP",
            "Weight" : 1,
            "S_NAME" : "77UP",
            "S_ADD" : "77up.bet",
            "S_STATUS" : "UP",
            "S_DPV" : 273
        }
    ]
}

HTML

<br>
<div style="text-align: center;">
   <google-chart #chart
      [title]="title"
      [type]="type"
      [data]="data"
      [columnNames]="columnNames"
      [options]="options"
      [width]="width"
      [height]="height">
   </google-chart>
</div>
<br>

Answer 1

对于数据，您正在传递一个对象数组...

[ 
    {
        "From" : "All Population",
        "To" : "SBOBETH",
        "Weight" : 1,
        "S_NAME" : "SBOBETH",
        "S_ADD" : "sbobeth.com",
        "S_STATUS" : "UP",
        "S_DPV" : 565
    }, 
    {
        "From" : "All Population",
        "To" : "GTRCASINO",
        "Weight" : 1,
        "S_NAME" : "GTRCASINO",
        "S_ADD" : "gtrcasino.com",
        "S_STATUS" : "DOWN",
        "S_DPV" : 1680
    }, 
    ...
]

但图表需要一个数组数组...

[ 
    ["All Population", "SBOBETH", 1],
    ["All Population", "GTRCASINO", 1],
    ...
]

尝试如下转换数据...

ngOnInit() {
  this.myservice.GetList().subscribe(
    (res: any) => { 
      this.data = res[0].list.map(row => {
        return [row.From, row.To, row.Weight];
      });
    },
    error => { 
    }
  );
}