Question

我正在尝试使用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;
}

}

最后，我总是在控制台中出现此错误

错误TypeError：无法读取未定义的属性“维度” 在swimlane-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）在swimlane-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）

Answer 1

看看ngx-graph中的文档如何trigger an update。

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

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

this.nodes.push(newNode);

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

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

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

Ngx图形未正确显示节点和边缘

1 个答案: