如何初始化primeng树组件

Primeng是一个基于Angular框架的UI组件库，提供了丰富的可重用组件，其中包括树组件。下面是如何初始化Primeng树组件的步骤：

首先，确保你已经安装了Angular和Primeng，并在你的项目中引入了相关的依赖。
在你的组件文件中，导入Primeng的树组件和相关的服务：

import { TreeNode } from 'primeng/api';
import { Tree } from 'primeng/tree';
import { MessageService } from 'primeng/api';

在组件类中定义树组件所需的变量：

treeData: TreeNode[];
selectedNode: TreeNode;

在组件的构造函数中注入MessageService服务：

constructor(private messageService: MessageService) { }

在组件的ngOnInit生命周期钩子函数中初始化树组件的数据：

ngOnInit() {
  this.treeData = [
    {
      label: 'Node 1',
      children: [
        {
          label: 'Child 1',
          children: [
            { label: 'Grandchild 1' },
            { label: 'Grandchild 2' }
          ]
        },
        { label: 'Child 2' }
      ]
    },
    {
      label: 'Node 2',
      children: [
        { label: 'Child 3' },
        { label: 'Child 4' }
      ]
    }
  ];
}

在这个例子中，我们创建了一个简单的树结构，包含了两个顶级节点和它们的子节点。

在组件的HTML模板中使用Primeng的树组件：

<p-tree [value]="treeData" [(selection)]="selectedNode" [contextMenu]="cm"></p-tree>

在这个例子中，我们将treeData绑定到树组件的value属性，将selectedNode绑定到树组件的(selection)属性，这样可以实现选择节点的功能。contextMenu属性可以用来定义右键菜单。

最后，你可以根据需要添加其他的配置和功能，比如节点的展开和折叠、节点的选择和取消选择等。

这样，你就成功地初始化了Primeng树组件。如果你想了解更多关于Primeng树组件的详细信息，可以参考腾讯云的相关产品PrimeNG的官方文档：https://www.primefaces.org/primeng/showcase/#/tree

页面内容是否对你有帮助？

有帮助

没帮助

如何初始化primeng树组件

dom、angular、primeng

给定一个tree，如何初始化它，使节点可以随意展开？我已经尝试获取@ViewChildren(Tree) tree的引用，但在尝试访问他的子代时会导致undefined引用

浏览 0提问于2016-07-10得票数 2

回答已采纳

1回答

PrimeNG - Tree DragDrop，节点不可拖

angular、primeng、primeng-tree

我是跟随从官方PrimeNG网站实现一个非常基本的DragDrop Tree (我只需要重新排序的功能，所有节点都是离开没有子)。树(是动态构造的)被成功地构造，但是显示的节点不是可拖动的，所以我不能上下移动它们。PrimeNG版本- 12.1.0，角版- 12.2.3，Node版本- 14.17.0

浏览 10提问于2021-10-13得票数 0

回答已采纳

4回答

PrimeNG树-以编程方式选择TreeNode

angular、typescript、tree、primeng

我使用PrimeNG树组件使用户能够根据树结构选择一些值。所选节点稍后将存储在数据库中，当用户再次访问编辑对话框时，应预先选择这些节点。有没有办法用当前的PrimeNG版本来实现这一点？或者，如果您能告诉我另一个支持复选框选择和预选节点的angular2树组件，那就更好了。

浏览 1提问于2017-03-01得票数 8

1回答

如何在PrimeNg树中通过id找到节点？

angular、primeng、angular-tree-component、primeng-tree

我们将从迁移到PrimeNg 组件。当应用程序启动时，树选择将被保存和还原。我们保存密钥字段(在我们的例子中是folderId)。tree.treeModel.getNodeById(folderId);node.setActiveAndVisible(); 我无法找到类似的方法来搜索PrimeNg树中的节点。

浏览 2提问于2021-08-13得票数 0

1回答

原始树-文件夹是静态的而不是交互式的

angular、primeng

我试着把primeng树添加到我的角度应用程序。我用的是角4 (4.0)和webpack。在webpack一书中，我补充如下：'primeng/primeng','primeng

浏览 2提问于2017-11-13得票数 0

回答已采纳

1回答

筛选器不使用原始树选择

angular、filter、dropdown、primeng

我已经实现了新的primeng树选择组件作为“复选框”的选择模式。display="chip" [filter]="true"></p-treeSelect>无法绑定到“筛选器”，因为它不是“p树选择如果‘p树选择’是一个角度组件，它有‘过滤器’输入，然后验证它是这个模块的一部分。如果'p-treeSelect‘是一个

浏览 3提问于2022-06-02得票数 1

2回答

PrimeNG 6.0.0-rc1 TreeTable不能展开行

icons、primeng、primeng-treetable

基本上，TreeTable组件正确读取树，但是在某种程度上不支持将行展开的箭头如果'p-treeTableToggler‘是一个Web组件，那么将'CUSTOM_ELEMENTS_SCHEMA’添加到该组件的'@NgModule.schemas‘中，以抑制此消息。我真的很困惑，它是如何在<e

浏览 2提问于2018-06-15得票数 0

1回答

更改PrimeNG树中的展开和排序规则图标

tree、icons、primeng、primeng-treetable

我正在使用来自PrimeNG的树组件。有谁知道我如何更改展开和折叠图标吗？我的目标是得到一个正负，而不是fa-caret-down和fa-caret-right。至

浏览 0提问于2018-04-12得票数 3

回答已采纳

1回答

如何设置primeNg树控件的背景

html、css、angular、primeng

角CLI 6 primeNg 6.0.1 我试图更改树组件的背景，但没有效果。当我在html文件中使用时，style=的“背景:红色”树变得混乱，并得到一个1的高度。有人在树的背景上有运气吗？

浏览 0提问于2018-08-14得票数 2

回答已采纳

1回答

原始确认服务

events、primeng

我有一个组件，它使用确认服务，如下所示 moduleId: module.id, } });此组件作为独立组件运行良好当将此组件用作子组件时，确认服务将被触发两次。也就是

浏览 0提问于2017-08-17得票数 6

1回答

Primeflex + PrimeNG选项卡+ PrimeNG树-无法使tabPanel增长

css、flexbox、primeng、primeng-tree、primeflex

有人能帮我布置一下这些PrimeNG组件吗？我希望有一个树采取整个垂直空间(减去底部的按钮设置)，滚动，如果需要。树被放置在选项卡面板中。

浏览 17提问于2020-09-18得票数 1

回答已采纳

2回答

我有一个对象(例如，表示一个项目)，它实现了一个树结构：{ children: Array<Project>=[];我使用Primeng(TreeTable)中的角组件来可视化这棵树，并让用户动态地更改树(添加子元素、更改数据值、.)。原因是primeng中的组件向manage添加了额外的属性来管理树(父级，展开，.)。“父”属性导致这个循环值问题。在类型记录中是否有方法将我的对象结构保留

浏览 2提问于2018-06-07得票数 1

回答已采纳

7回答

不应用angular2的素数ng样式

html、angular、primeng

嗨，我刚开始使用PrimeNG 2。我找到了这个库，我遵循了这个教程:除了样式之外，它都能工作。他们没有申请，我真的不知道该怎么做。而且，我也不太明白如何在它们的元素上应用我自己的类。 Header, Dialog, InputText} from 'primeng/primeng

浏览 0提问于2016-07-12得票数 13

回答已采纳

3回答

PrimeNG数据表不工作

angular、typescript、datatable、npm、primeng

我试图将PrimeNG数据表与angular2一起使用，但它似乎不起作用。我已经安装了PrimeNG和npm。在我的组件中我导入然后在模板中使用 <p-dataTable [value]

浏览 0提问于2016-12-02得票数 0

1回答

p-tableHeaderCheckbox --初始化时选中的所有行

angular、primeng

我在我的项目中使用PrimeNG，在组件中有一个p表，其中包含一个p tableHeaderCheckbox。非常感谢您的帮助！

浏览 4提问于2020-08-18得票数 2

回答已采纳

1回答

我们可以使用多个库在角(2/4/5/6)，因为它支持TreeShaking？而不影响性能和构建大小。

javascript、angular、angular5、angular6

在PrimeNg中，组件大多是独立的模块，因此您只能添加所需的模块，而在经过几次更新之后，角材料也是如此。另外，角(5/6)是否支持100%的树抖动，还是我们还需要使用Rollup.js？

浏览 1提问于2018-06-26得票数 3

回答已采纳

1回答

在primeng中重命名树节点

primeng、primeng-treetable

我正在使用primeng树组件，并且我需要内联编辑所选树节点的名称。我已经用另一个对话框实现了节点的重命名。但是，我想将其重命名为内联。是否可以重命名所选的树节点？

浏览 3提问于2018-11-06得票数 0

1回答

PrimeNG 10.0.3 -错误NG8001：“P-tabView”不是已知的元素

primeng

我在一个角10应用程序中使用PrimeNG 10.0.3。在它中，我导入了几个PrimeNG组件并使用它们，没有问题。} from 'primeng/button';import { ToastModule } from'primeng/toast'; import { DialogModule }

浏览 2提问于2020-11-08得票数 0

回答已采纳

2回答