Angular 12中带有数据绑定的同步图

Question

根据Syncfusion的文档，Diagram控件(ejs图(应该支持使用datasourcesettings属性的数据绑定(https://ej2.syncfusion.com/angular/documentation/diagram/data-binding/)。我一直在尝试让它发挥作用，但似乎没有任何样本(来自文档(适用于Angular 12。

Repro步骤：

• 新Angular 12项目
• 按照"关系图"控件的"入门"说明进行操作(https://ej2.syncfusion.com/angular/documentation/diagram/getting-started/)
• 从文档中选择任何数据绑定示例并将其添加到项目中

预期结果：应符合文档要求实际结果：空白页。(注意，如果我删除快照设置，我至少可以显示背景网格(

我还尝试过在html中和通过绑定nodes属性来显式设置节点，这似乎可以在中工作

Answer 1

我们已经为带有上下文菜单的关系图创建了一个示例。我们已经检查了Angular 12中的图表上下文菜单功能，它运行良好。此外，我们还可以与上下文菜单进行交互。我们怀疑问题的发生是因为您没有在图中注入DiagramContextMenu模块，或者您没有在style.CSS中添加与上下文菜单相关的CSS，因此上下文菜单不会在图中出现。要使用图表中的上下文菜单，请在图表中注入DiagramContextMenu模块，并在style.CSS文件中添加与上下文菜单相关的CSS关于如何注入DiagramContextMenu以及如何使用上下文菜单CSS，请参阅代码片段。

//app.component.ts

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { Diagram, NodeModel, ConnectorModel, SnapConstraints, SnapSettingsModel, DiagramTools, ContextMenuSettingsModel, DiagramContextMenu } from '@syncfusion/ej2-diagrams';
import { DataManager } from '@syncfusion/ej2-data';
Diagram.Inject(DiagramContextMenu)
public contextMenu: ContextMenuSettingsModel = { show: true}

//样式.css

@import '../node_modules/@syncfusion/ej2-angular-diagrams/styles/material.css';// Add the context menu related css
@import ../node_modules/@syncfusion/ej2-navigations/styles/material.css;

我们附上了一个视频演示，演示图表上下文菜单是如何工作的。请参阅下面的视频链接。

视频：https://www.syncfusion.com/downloads/support/directtrac/general/ze/ContextMenu-Video1968682518

我们附上了一个Angular-12样品和一个上下文菜单供您参考。请在以下链接中找到样本

样品：https://www.syncfusion.com/downloads/support/directtrac/general/ze/Angular-ContextMenu1248041383

如果问题仍在复制，请与我们分享一个说明问题的简单示例，或修改上面的示例，使用问题复制步骤复制问题。这将有助于我们更好地为您服务。

Answer 2

目前，我们对Angular 12中的图没有完全的兼容性支持。我们将在2021年第2卷的主要版本中为该图表提供完全兼容性支持。然而，我们已经检查了Angular 12中的图表dataBinding功能。我们在dataBinding中没有遇到任何问题。我们怀疑发生此问题是因为您没有在图中注入DataBinding和层次结构树模块，或者没有在app.module.ts中包括图服务。我们在文档中已经提到了如何在app.mdule.ts注入图模块。有关如何注入图模块，请参阅以下文档。

模块注入：https://ej2.syncfusion.com/angular/documentation/diagram/getting-started/#module-注入

我们附上了一个视频演示，演示如何运行图表数据绑定示例。请参阅下面的视频链接

视频：https://www.syncfusion.com/downloads/support/directtrac/general/ze/Diagram-DataBinding-Video-90404990

我们附上了Angular-12样品供您参考。请在以下链接中找到样本

样品：https://www.syncfusion.com/downloads/support/directtrac/general/ze/Diagram-DataBinding-670541750

如果问题仍在复制，请与我们分享一个说明问题的简单示例，或修改上面的示例，使用问题复制步骤复制问题。这将有助于我们更好地为您服务。