Visjs使用画布外部的按钮动态添加节点

Question

我正在尝试这样做 http://visjs.org/examples/network/data/dynamicData.html

但是我无法使功能正常工作。我在角度6。 我希望能够在画布外部添加一个带有按钮的新节点，并单击添加以在其添加到画布之前具有输入字段

单击添加时出现此错误=无法读取未定义的属性“添加”

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { Network, DataSet, Node, Edge, IdType } from 'vis';
declare var vis

@Component({
  selector: 'app-micro-grid-management',
  templateUrl: './micro-grid-management.component.html',
  styleUrls: ['./micro-grid-management.component.css']
})
export class MicroGridManagement implements OnInit {

  constructor(private router: Router, private route: ActivatedRoute) { 
  
  }
  
  public nodes: Node;
  public edges: Edge;
  public network: Network;
  ngOnInit() {
    let nodes, edges, network
    nodes = new vis.DataSet();
    nodes.on('*', function () {
      document.getElementById('nodes').innerHTML = JSON
        .stringify(nodes.get(), null, 4);
    });
    nodes.add([
      {
        id: 1,
        label: 'PV Panels',
        currentP: '100 kW',
        setpp: '100 kW',
        currentq: '2 kVar',
        setq: '2 kVar',
        shape: 'square', color: '#ef6c00'
      },
      {
        id: 2,
        label: 'Wind Turbines',
        currentP: '100 kW',
        setpp: '100 kW',
        currentq: '2 kVar',
        setq: '2 kVar',
        shape: 'square', color: '#ef5350'
      },
      {
        id: 3,
        label: 'Gensets',
        currentP: '100 kW',
        setpp: '100 kW',
        currentq: '2 kVar',
        setq: '2 kVar',
        shape: 'square', color: '#00bfa5',
        font: { strokeWidth: 1, strokeColor: 'white' }
      },
      {
        id: 4,
        label: 'Battery',
        currentP: '100 kW',
        setpp: '100 kW',
        currentq: '2 kVar',
        setq: '2 kVar',
        shape: 'square', color: '#c2185b'
      },
      {
        id: 5,
        label: 'Fuelscells',
        currentP: '100 kW',
        setpp: '100 kW',
        currentq: '2 kVar',
        setq: '2 kVar',
        shape: 'square', color: '#5c6bc0'
      }
    ]);

    edges = new vis.DataSet();
    edges.on('*', function () {
      document.getElementById('edges').innerHTML = JSON
        .stringify(edges.get(), null, 4);
    });
    edges.add([
      { id: '1', from: '1', to: '2' },
      { id: '2', from: '1', to: '3' },
      { id: '3', from: '2', to: '4' },
      { id: '4', from: '2', to: '5' }
    ]);

    let container = document.getElementById('network');
    let data = {
      nodes: nodes,
      edges: edges
    };

    let options = {};
    network = new vis.Network(container, data, options);
  }
  
  toJSON(obj) {
       return JSON.stringify(obj, null, 4);
  }
  addNode() {
    try{
      this.nodes.add({
         id: document.getElementById('node-id'),
         label: document.getElementById('node-label')
      });
    }
    catch (err) {
      alert(err);
    }
  }

  updateNode() {
    id: document.getElementById('node-id');
    label: document.getElementById('node-label');
  }
}

<table>
    <tr>
        <td>
            <h2>Node</h2>
            <table>
                <tr>
                    <td></td>
                    <td><label for="node-id">Id</label></td>
                    <td><input id="node-id" type="text" value="6"></td>
                </tr>
                <tr>
                    <td></td>
                    <td><label for="node-label">Label</label></td>
                    <td><input id="node-label" type="text" value="Node 6"></td>
                </tr>
                <tr>
                    <td></td>
                    <td>Action</td>
                    <td>
                        <button id="node-add" onclick="addNode();">Add</button>
                        <button id="node-update" (click)="updateNode();">Update</button>
                        <button id="node-remove" (click)="removeNode();">Remove</button>
                    </td>
                </tr>
            </table>
        </td>
        <td>
            <h2>Edge</h2>
            <table>
                <tr>
                    <td></td>
                    <td><label for="edge-id">Id</label></td>
                    <td><input id="edge-id" type="text" value="5"></td>
                </tr>
                <tr>
                    <td></td>
                    <td><label for="edge-from">From</label></td>
                    <td><input id="edge-from" type="text" value="3"></td>
                </tr>
                <tr>
                    <td></td>
                    <td><label for="edge-to">To</label></td>
                    <td><input id="edge-to" type="text" value="4"></td>
                </tr>
                <tr>
                    <td></td>
                    <td>Action</td>
                    <td>
                        <button id="edge-add" (click)="addEdge();">Add</button>
                        <button id="edge-update" (click)="updateEdge();">Update</button>
                        <button id="edge-remove" (click)="removeEdge();">Remove</button>
                    </td>
                </tr>
            </table>
        </td>
    </tr>

</table>

<h1>View</h1>
<table class="view">
    <colgroup>
        <col width="25%">
        <col width="25%">
        <col width="50%">
    </colgroup>
    <tr>
        <td>
            <h2>Nodes</h2>
            <pre id="nodes"></pre>
        </td>

        <td>
            <h2>Edges</h2>
            <pre id="edges"></pre>
        </td>

        <td>
            <h2>Network</h2>

            <div id="network"></div>
        </td>
    </tr>
</table>