为什么ej2DiagramComponent中的节点之间可能无法建立通信？

Question

我正在尝试使用 datamanager 在节点之间创建连接 但是当我指定 connectionDataSource 时，节点消失并且屏幕为空，控制台中没有错误

@Component({
  selector: 'app-relationship-playground-component',
  template: `<ejs-diagram id="diagram" width="100%" height="580px" [layout]='layout' [dataSourceSettings]='dataSourceSettings' [getNodeDefaults]='nodeDefaults' [getConnectorDefaults]='connectorDefaults'>
  </ejs-diagram>`,
  encapsulation: ViewEncapsulation.None
})
export class RelationshipPlaygroundComponentComponent implements OnInit{
  @ViewChild("diagram") public layout?: LayoutModel;
  public dataSourceSettings?: DataSourceModel;

  public connections : Object[] =  [
    {
      id: "a96b708d-9878-409b-9424-79afd536fbcb",
      source: "e0ad8a67-65a4-488e-a13e-af4a51095da4",
      target: "991d0d06-f084-43df-871d-2c501a41108e",
    }
  ]

  public elements : Object[] = [
    {
      caption: "Accom (sample)",
      id: "e0ad8a67-65a4-488e-a13e-af4a51095da4",
      recordId: "405947d0-2ffb-4ded-8675-0475f19f5a81",
    },
    {

      caption: "Our company",
      id: "991d0d06-f084-43df-871d-2c501a41108e",
      recordId: "e308b781-3c5b-4ecb-89ef-5c1ed4da488e",
    }
  ]

  public nodeDefaults(node: NodeModel): NodeModel {
    return node;
  }

  public connectorDefaults(connector: ConnectorModel): ConnectorModel {
    connector.type = "Orthogonal";
    connector.cornerRadius = 7;
    return connector;
  }
  ngOnInit(): void {
    this.layout = {
      type: "HierarchicalTree", verticalSpacing: 40
    };
    this.dataSourceSettings = {
      id: "id",
      dataManager: new DataManager(this.elements as JSON[]),
      connectionDataSource: {
        id: 'id',
        sourceID: 'source',
        targetID: 'target',
        dataManager: new DataManager(this.connections as JSON[])
      }
    };
  }
}

我从文档和示例存储库中获取了示例 https://github.com/syncfusion/ej2-samples/blob/master/src/diagram/crud.ts

https://ej2.syncfusion.com/angular/documentation/diagram/data-binding#how-to-perform-editing-at-runtime

Answer 1

使用 DataManager 的分层树布局已呈现。在DataManager中，您需要分配一个带有Id和parentId的JSON对象，然后将这个DataManager分配给dataSourceSettings中的dataSource属性。布局是根据布局中定义的ID和parentId来渲染的。渲染布局时，无需设置connectionDataSource。

文档 https://ej2.syncfusion.com/angular/documentation/diagram/automatic-layout

样品 https://stackblitz.com/edit/angular-dzj1jr-87pxp8?file=src%2Fapp.component.html