2

我正在尝试使用 ngx-graph 库创建一个图形（我是新手）。我正在尝试以动态方式创建节点和边。我从服务中获取信息，并将这些数据推送到两个单独的数组（节点和边）中。问题是数据被正确推送，但我的图形在同一位置创建节点和边。（x=0 和 y=0）。我也试图强迫这个位置，但不要改变。

 <ngx-graph *ngIf="nodes.length > 0 && links.length > 0 && !loading"
    layout="dagre"
    [view]="[800,500]"
    [links]="links" 
    [nodes]="nodes">
  </ngx-graph>

在我的 .ts 组件中，我添加了节点和边：

createGraph() {

   this.nodes = [];
   this.links = [];

   if (this.items) {

   this.nodes.push({
      id: this.items.id,
      label: this.items.description
   });


  if (this.items.motivations) {
    let i = 0;
    for (let motivation of this.items.motivations) {
      ++i;
       this.nodes.push({
         id: motivation .id,
         label: motivation .description
       });

       this.links.push({
         id: motivation .id,
         source: this.nodes[0].id,
         target: motivation .id 
       });
    }

  }
  this.loading = false;
}

}

最后我总是在控制台中出现这个错误

错误类型错误：无法读取未定义的属性“维度”
    在泳道-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-graph.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)
4

1 回答 1

1

查看来自ngx-graph的文档如何触发更新。

图形组件会在每次输入更改时自行更新。输入是不可变的，因此为了触发更新，您需要传递一个新的对象实例。

例如，这不会触发更新，因为我们正在修改节点数组，而不是创建新实例：

this.nodes.push(newNode);

我们需要创建一个新的数组实例以触发组件中的更改检测：

this.nodes.push(newNode);
this.nodes = [...this.nodes];

要手动触发更新，该图接受一个 update$ 输入作为 observable：

于 2019-10-02T12:33:09.637 回答