Javascript Ngx图形不';不能正确显示节点和边
我正在尝试用ngx图形库创建一个图形(我是新来的)。我正在尝试以动态的方式创建节点和边。我从服务中获取信息,然后将这些数据推送到两个单独的数组(节点和边缘)。问题是数据推送正确,但我的图形在同一位置创建节点和边。(x=0和y=0)。我也试着强迫这个位置,但没有改变Javascript Ngx图形不';不能正确显示节点和边,javascript,angular,ngx-graph,Javascript,Angular,Ngx Graph,我正在尝试用ngx图形库创建一个图形(我是新来的)。我正在尝试以动态的方式创建节点和边。我从服务中获取信息,然后将这些数据推送到两个单独的数组(节点和边缘)。问题是数据推送正确,但我的图形在同一位置创建节点和边。(x=0和y=0)。我也试着强迫这个位置,但没有改变 <ngx-graph *ngIf="nodes.length > 0 && links.length > 0 && !loading" layout="dagre"
<ngx-graph *ngIf="nodes.length > 0 && links.length > 0 && !loading"
layout="dagre"
[view]="[800,500]"
[links]="links"
[nodes]="nodes">
</ngx-graph>
}
最后,我总是在控制台中出现这个错误
ERROR TypeError: Cannot read property 'dimension' of undefined
at swimlane-ngx-graph.js:2016
at Array.map ()
at QueryList.push../node_modules/@angular/core/fesm5/core.js.QueryList.map (core.js:5412)
at GraphComponent.push../node_modules/@swimlane/ngx-graph/fesm5/swimlane-ngx-graph.js.GraphComponent.applyNodeDimensions (swimlane-ngx-graph.js:1988)
at GraphComponent.push../node_modules/@swimlane/ngx-graph/fesm5/swimlane-ngx-graph.js.GraphComponent.draw (swimlane-ngx-graph.js:1796)
at swimlane-ngx-graph.js:1768
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
at Object.onInvokeTask (core.js:4053)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
错误类型错误:无法读取未定义的属性“维度”
在泳道ngx graph.js:2016
在Array.map()处
在QueryList.push../node_modules/@angular/core/fesm5/core.js.QueryList.map(core.js:5412)
在GraphComponent.push../node_modules/@swimlane/ngx-graph/fesm5/swimlane-ngx-graph.js.GraphComponent.applyNodeDimensions(swimlane-ngx-graph.js:1988)
在GraphComponent.push../node_modules/@swimlane/ngx-graph/fesm5/swimlane-ngx-graph.js.GraphComponent.draw(swimlane-ngx-graph.js:1796)
在泳道ngx图形。js:1768
在ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask(zone.js:421)
在Object.onInvokeTask(core.js:4053)
在ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask(zone.js:420)
在Zone.push../node_modules/Zone.js/dist/Zone.js.Zone.runTask(Zone.js:188)
从“如何”查看文档 图形组件会在每次输入更改时更新自身。输入 是不可变的,因此为了触发更新,您需要 传递一个新的对象实例 例如,这不会触发更新,因为我们正在修改节点数组,而不是创建新实例:
this.nodes.push(newNode);
我们需要创建一个新的数组实例,以便触发组件中的更改检测:
this.nodes.push(newNode);
this.nodes = [...this.nodes];
要手动触发升级数据,图形接受更新$input作为可观察对象:您能提供一个显示错误的最小值吗?我有同样的问题,但您的解决方案对我不起作用。仍然在寻找答案。请为我提供一个答案,这个问题是一个真正的“抓住了”。在ngx图形中,节点id被视为字符串。当我将它们设置为一个数字时,不匹配导致了这个问题。
this.nodes.push(newNode);
this.nodes = [...this.nodes];