如何解决core.js错误TypeError:可视网络角度为10的数组或数据集
如何在TS中正确初始化vis-network以避免出现以下错误:
ERROR TypeError: Array or DataSet expected
at t.value (vis-network.min.js?087a:58)
at Lf.setData (vis-network.min.js?087a:58)
at new Lf (vis-network.min.js?087a:58)
at DependencyDashboardComponent.ngAfterViewInit (dependency-dashboard.component.ts?5305:39)
at callHook (core.js?7d7a:2922)
at callHooks (core.js?7d7a:2892)
at executeInitAndCheckHooks (core.js?7d7a:2844)
at refreshView (core.js?7d7a:7304)
at refreshEmbeddedViews (core.js?7d7a:8335)
at refreshView (core.js?7d7a:7257)
ngAfterViewInit(): void {
// create an array with nodes
const nodes = new DataSet<any>([
{ id: 1,label: 'Node 1' },{ id: 2,label: 'Node 2' },{ id: 3,label: 'Node 3' },{ id: 4,label: 'Node 4' },{ id: 5,label: 'Node 5' },]);
// create an array with edges
const edges = new DataSet<any>([
{ from: '1',to: '3' },{ from: '1',to: '2' },{ from: '2',to: '4' },to: '5' },]);
const data = { nodes,edges };
const container = this.visNetwork;
this.networkInstance = new Network(container.nativeElement,data,{});
}
完整代码示例可在https://github.com/tillias/microservice-catalog/blob/dev/src/main/webapp/app/dashboard/dependency-dashboard/dependency-dashboard.component.ts下找到
它以前在角度9时就像魅力一样。
我创建了问题https://github.com/visjs/vis-network/issues/1085,但不确定是错误还是“功能”。
解决方法
根据vis.js developers的答案,关键是正确导入。这是有效的解决方案:
import {DataSet} from 'vis-data/peer';
import {Network} from 'vis-network/peer';
refreshGraph(dependencies: IDependency[]): void {
const nodes = new DataSet<any>();
const edges = new DataSet<any>();
dependencies.forEach(d => {
nodes.add({
id: d.id,label: d.name
});
edges.add({
from: d.source?.id,to: d.target?.id
})
})
const data = {nodes,edges};
const container = this.visNetwork;
this.networkInstance = new Network(container.nativeElement,data,{
height: '500px',});
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。