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

我正试着这么做

但我无法使这些功能正常工作。我在6号公路上。 我希望能够在画布外添加一个带有按钮的新节点，并且在将其添加到画布之前，单击add以拥有一个输入字段

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

从'@angular/core'导入{Component，OnInit}；
从'@angular/Router'导入{Router，ActivatedRoute}；
从“vis”导入{Network，DataSet，Node，Edge，IdType}；
声明var vis
@组成部分({
选择器：“应用程序微网格管理”，
templateUrl:'./微网格管理.component.html'，
样式URL:['./微网格管理.component.css']
})
导出类MicroGridManagement实现OnInit{
构造函数（专用路由器：路由器，专用路由：ActivatedRoute）{
}
公共节点：节点；
公共边缘：边缘；
公共网络：网络；
恩戈尼尼特（）{
让节点、边、网络
nodes=new vis.DataSet（）；
nodes.on（'*'，function（）{
document.getElementById（'nodes'）。innerHTML=JSON
.stringify（nodes.get（），null，4）；
});
nodes.add([
{
id:1，
标签：“光伏板”，
电流P:'100千瓦'，
setpp：“100千瓦”，
currentq:'2 kVar'，
setq:‘2千伏安’，
形状：“方形”，颜色：“ef6c00”
},
{
id:2，
标签：“风力涡轮机”，
电流P:'100千瓦'，
setpp：“100千瓦”，
currentq:'2 kVar'，
setq:‘2千伏安’，
形状：“方形”，颜色：“ef5350”
},
{
id:3，
标签：“发电机组”，
电流P:'100千瓦'，
setpp：“100千瓦”，
currentq:'2 kVar'，
setq:‘2千伏安’，
形状：“方形”，颜色：“00bfa5”，
字体：{strokeWidth:1，strokeColor:'white'}
},
{
id:4，
标签：“电池”，
电流P:'100千瓦'，
setpp：“100千瓦”，
currentq:'2 kVar'，
setq:‘2千伏安’，
形状：“方形”，颜色：“#c2185b”
},
{
id:5，
标签：“Fuelscells”，
电流P:'100千瓦'，
setpp：“100千瓦”，
currentq:'2 kVar'，
setq:‘2千伏安’，
形状：“方形”，颜色：“5c6bc0”
}
]);
edges=新的vis.DataSet（）；
在（'*'，函数（）{
document.getElementById（'edges'）。innerHTML=JSON
.stringify（edges.get（），null，4）；
});
添加([
{id:'1'，从：'1'，到：'2'}，
{id:'2'，从'1'，到'3'}，
{id:'3'，从：'2'，到：'4'}，
{id:'4'，从：'2'，到：'5'}
]);
让container=document.getElementById（'network'）；
让数据={
节点：节点，
边缘：边缘
};
让选项={}；
网络=新的可视网络（容器、数据、选项）；
}
toJSON（obj）{
返回JSON.stringify（obj，null，4）；
}
addNode（）{
试一试{
此为.nodes.add({
id:document.getElementById（'node-id'），
标签：document.getElementById（'node-label'）
});
}
捕捉（错误）{
警惕（err）；
}
}
updateNode（）{
id:document.getElementById（'node-id'）；
标签：document.getElementById（'node-label'）；
}
}

节点
身份证件
标签
行动
添加
更新
去除
边缘
身份证件
从…起
到
行动
添加
更新
去除
看法
节点
边缘
网络

您找到解决方案了吗？如果是的，请帮助我，我被困在这样的事情。