невозможно создать соединение между узлами в Jsplumb

Question

Я создал потоковую диаграмму, используя jsplumb free angular версия родительского узла к родительскому узлу работает, но если я добавил дочерние узлы внутри родительского узла, то я могу сделать дочерний узел к родительскому узлу при создании потоковой диаграммы, но не могу создать потоковую диаграмму, если я делаю это через json.

app.component.ts

   import { NodeService } from "./node.service";

   @Component({
     selector: "my-app",
     templateUrl: "./app.component.html",
     styleUrls: ["./app.component.css"]
   })
   export class AppComponent implements OnInit {
     nodes = [];
     items = [1, 2, 3, 4];
     connections = [];

     constructor(private nodeService: NodeService) {}

     ngOnInit() {
       this.fillFromJson();
     }

     fillFromJson() {
       const json = `{"nodes":[{"id":"Operator 1","top":59,"left":409},{"id":"Operator 2","top":274,"left":708},{"id":"Operator","top":37,"left":31}],"connections":[{"uuids":["Operator 11","Operator 2_top"]},{"uuids":["Operator 1_bottom","Operator 2_top"]},{"uuids":["Operator_bottom","Operator 1_top"]}]}`;
       const data = JSON.parse(json); //JSON Parsing
       this.nodes = data.nodes;
       this.connections = data.connections;
     }
   }

Это app.component.ts

app.component. html

<nodes-container #nodeContainer [nodes]="nodes" [connections]="connections">

Это app.component. html

node.service.ts

      ComponentRef,
      ComponentFactoryResolver,
      Injectable,
      Inject,
      ReflectiveInjector
    } from "@angular/core";
    import { jsPlumb } from "jsplumb";

    import { NodeComponent, Node } from "./shared/components/node/node.component";

    @Injectable()
    export class NodeService {
      private rootViewContainer: any;

      jsPlumbInstance = jsPlumb.getInstance();

      constructor(private factoryResolver: ComponentFactoryResolver) {}

      public setRootViewContainerRef(viewContainerRef) {
        this.rootViewContainer = viewContainerRef;
      }

      public addDynamicNode(node: Node) {
        const factory = this.factoryResolver.resolveComponentFactory(NodeComponent);
        const component = factory.create(this.rootViewContainer.parentInjector);
        (<any>component.instance).node = node;
        (<any>component.instance).jsPlumbInstance = this.jsPlumbInstance;
        this.rootViewContainer.insert(component.hostView);
          console.log("in NodeService..", component.instance);
      }

      addConnection(connection) {
        this.jsPlumbInstance.connect({ uuids: connection.uuids });
      }

      public clear() {
        this.rootViewContainer.clear();
      }
    }

Это служба узла

node.component. html

      <h1 class="title">{{ node.id }}</h1>
      <!-- <ngx-sortable [items]="items" [name]="'List'" (listSorted)="listSorted($event)">
        <ng-template let-item>
          <div class="sortable-list-item">
            {{item}}
          </div>
        </ng-template>
      </ngx-sortable> -->
      <div [sortablejs]="items" [sortablejsOptions]="{ animation: 150 }">
        <ng-container *ngFor="let item of items;let i = index">
          <div id="{{node.id}}{{i}}">
            <app-edit-input [data]="item?.value" (focusOut)="saveCost($event)"></app-edit-input>
          </div>
        </ng-container>
      </div>
      <!-- <div [sortablejs]="items" [sortablejsOptions]="{ animation: 150 }">
        <ng-container *ngFor="let item of items">
          <div style="width: 100%;">
            <h4 style="margin: 0px;">item</h4>
          </div>
        </ng-container>
      </div> -->
</div>

Это node.component. html

node.component.ts

    import { jsPlumb } from "jsplumb";

    export interface Node {
      id: string;
      top?: number;
      left?: number;
    }

    @Component({
      selector: "node",
      templateUrl: "./node.component.html",
      styleUrls: ["./node.component.css"]
    })
    export class NodeComponent implements AfterViewInit {
      @Input() node: Node;
      items = [
        {
          key: 1,
          value: "Hey Hi!"
        },
        {
          key: 2,
          value: "How are you!"
        },
        {
          key: 3,
          value: "I hope you are fine!"
        },
        {
          key: 4,
          value: "Lets meet!"
        }
      ];
      @Input() jsPlumbInstance;

      ngAfterViewInit() {
        const exampleDropOptions = {
          tolerance: "touch",
          hoverClass: "dropHover",
          activeClass: "dragActive"
        };
        let Endpoint1 = {
          endpoint: ["Dot", { radius: 7 }],
          paintStyle: { fill: "#99cb3a" },
          isSource: true,
          scope: "jsPlumb_DefaultScope",
          connectorStyle: { stroke: "#99cb3a", strokeWidth: 3 },
          connector: ["Bezier", { curviness: 63 }],
          maxConnections: 1,
          isTarget: false,
          connectorOverlays: [["Arrow", { location: 1 }]],
          dropOptions: exampleDropOptions
        };
        let Endpoint2 = {
          endpoint: ["Dot", { radius: 4 }],
          paintStyle: { fill: "#ffcb3a" },
          isSource: false,
          scope: "jsPlumb_DefaultScope",
          maxConnections: 30,
          isTarget: true,
          dropOptions: exampleDropOptions
        };
        const { id } = this.node;
        this.jsPlumbInstance.addEndpoint(
          id,
          { anchor: "Bottom", uuid: id + "_bottom" },
          Endpoint1
        );
        this.jsPlumbInstance.addEndpoint(
          id,
          { anchor: "Top", uuid: id + "_top" },
          Endpoint2
        );

        for(let i = 0; i< this.items.length; i++){
          this.jsPlumbInstance.addEndpoint(
            id+i,
            { anchor: "Right", uuid: id + "_right" },
            Endpoint1
          );
        }

        this.jsPlumbInstance.draggable(id);
      }

      name = "Hello!!!";
      saveCost(value) {
        this.name = value;
      }

      listSorted(event) {
        console.log(event);
      }
    }

Это node.component.ts