Angular 12中的同步融合图与数据绑定

Question

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

复制步骤：

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

预期结果：应该按照文档 实际结果：空白页。 （请注意，如果我删除快照设置，我至少会显示背景网格）

我还尝试在 html 中显式设置节点并通过绑定节点属性，这似乎有效

Answer 1

目前，我们没有对 Angular 12 中图表的完全兼容性支持。我们将在 Volume 2 2021 主版本中提供对图表的完全兼容性支持。但是，我们已经检查了 Angular 12 中的图表数据绑定功能。我们在数据绑定中没有遇到任何问题。我们怀疑问题的出现是因为您没有在图中注入 DataBinding 和 HierarchicalTree 模块，或者没有在 app.module.ts 中包含图服务。我们已经在文档中提到如何在 app.module.ts 中注入图表模块。有关如何注入图表模块，请参阅以下文档。

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

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

视频：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

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

Answer 2

我们为图表创建了一个带有上下文菜单的示例。我们已经检查了 Angular 12 中的图表上下文菜单功能，它工作正常。我们还可以与上下文菜单进行交互。我们怀疑问题的出现是因为您没有在图表中注入 DiagramContextMenu 模块，或者您没有在 style.css 中添加与上下文菜单相关的 CSS，因此上下文菜单不会出现在图表中。 要在图表中使用上下文菜单，请在图表中注入 DiagramContextMenu 模块，并在 style.css 文件中添加上下文菜单相关的 CSS DiagramContextMenu的注入方法和上下文菜单CSS的使用方法请参考sn-p代码。

//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

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