无法在 PrimeNG 树节点组件中显示数据

Question

我正在尝试在角度 5 项目中以树节点格式显示数据。

我正在从以下形式的服务中获取数据(以对象形式(：

{
"data": [
{
"label": "Documents",
"data": "Documents Folder",
"expandedIcon": "fa fa-folder-open",
"collapsedIcon": "fa fa-folder",
"children": [
{
"label": "Work",
"data": "Work Folder",
"expandedIcon": "fa fa-folder-open",
"collapsedIcon": "fa fa-folder",
"children": [
{
"label": "Expenses.doc",
"icon": "fa fa-file-word-o",
"data": "Expenses Document"
},
{
"label": "Resume.doc",
"icon": "fa fa-file-word-o",
"data": "Resume Document"
}
]
},
{
"label": "Home",
"data": "Home Folder",
"expandedIcon": "fa fa-folder-open",
"collapsedIcon": "fa fa-folder",
"children": [
{
"label": "Invoices.txt",
"icon": "fa fa-file-word-o",
"data": "Invoices for this month"
}
]
}
]
},
{
"label": "Pictures",
"data": "Pictures Folder",
"expandedIcon": "fa fa-folder-open",
"collapsedIcon": "fa fa-folder",
"children": [
{
"label": "barcelona.jpg",
"icon": "fa fa-file-image-o",
"data": "Barcelona Photo"
},
{
"label": "logo.jpg",
"icon": "fa fa-file-image-o",
"data": "PrimeFaces Logo"
},
{
"label": "primeui.png",
"icon": "fa fa-file-image-o",
"data": "PrimeUI Logo"
}
]
},
{
"label": "Movies",
"data": "Movies Folder",
"expandedIcon": "fa fa-folder-open",
"collapsedIcon": "fa fa-folder",
"children": [
{
"label": "Al Pacino",
"data": "Pacino Movies",
"children": [
{
"label": "Scarface",
"icon": "fa fa-file-video-o",
"data": "Scarface Movie"
},
{
"label": "Serpico",
"icon": "fa fa-file-video-o",
"data": "Serpico Movie"
}
]
},
{
"label": "Robert De Niro",
"data": "De Niro Movies",
"children": [
{
"label": "Goodfellas",
"icon": "fa fa-file-video-o",
"data": "Goodfellas Movie"
},
{
"label": "Untouchables",
"icon": "fa fa-file-video-o",
"data": "Untouchables Movie"
}
]
}
]
}
]
}

我有如下 HTML：

<p-tree [value]="files"></p-tree>

其中文件类型如下

files: TreeNode[];

我收到如下错误：

错误：

找不到不同的支持对象"[对象对象]">

请您帮助我将对象转换为树节点数组格式。

提前谢谢。

Answer 1

当你将类型声明为 TreeNode[]- 你需要告诉它引用的是哪个对象

请按照以下示例操作。(文件名只是示例(。随意使用您自己的

创建一个名为preset.data.ts的文件

export class PresetsProjectsData {
static manukas = [
{
'label': 'Manuka',
'data': 'Manuka',
'expandedIcon': 'fa-folder-open',
'collapsedIcon': 'fa-folder',
'selectable': false,
'children': [
{'label': 'Monofloral Manuka', 'icon': 'avatar', 'data': 'fe'},
{'label': 'Multifloral Manuka', 'icon': 'avatar', 'data': 'be'}
]
}
];
}

在您的 html 文件中：

<p-tree [value]="manukasTree"></p-tree>

在 TS 文件中：首先导入预设文件

import {TreeNode} from 'primeng/primeng';
import {PresetsProjectsData} from './preset.data';

并在您的出口类声明中。像下面这样映射它。

manukasTree: TreeNode[] = PresetsProjectsData.manukas;

希望它应该有效。

Answer 2

您可以使用递归函数在 .ts 文件中构造files: TreeNode[]属性，以确保正确引用它：

import { TreeNode } from 'primeng/primeng';
files: TreeNode[] = [];
ngOnInit() {
this.dataStore.forEach( (item: Data) => {
if (!item.parent) {
this.files.push(this.generateTreeStructure(item));
}
});
}
generateTreeStructure( parentNode: Data ): TreeNode {
let parentNodeChildren: TreeNode[] = [];
let item: TreeNode = {
label: parentNode.title,
data: JSON.stringify(parentNode),
expandedIcon: "fa fa-folder-open",
collapsedIcon: "fa fa-folder",
children: []
};
this.dataStore.forEach(item => {
if (parentNode.id === item.parent.id) {
let childNode: TreeNode = {
label: item.title,
data: JSON.stringify(item),
expandedIcon: "fa fa-folder-open",
collapsedIcon: "fa fa-folder",
children: []
};
childNode = this.generateTreeStructure(item);
parentNodeChildren.push(childNode);
}
});
item.children.push(...parentNodeChildren);
return item;
}

Answer 3

我用以下内容解决了：

categoriesFormat: TreeNode[];
categoriesFormatStack: TreeNode[];
selectedCategory: TreeNode[];
convertToTreeNode(
categories: Category[],
index: number,
treeNode: TreeNode = null
) {
if (treeNode == null) {
const root = categories.find((c) => c.parentId == -1);
this.categoriesFormat = [];
this.categoriesFormatStack = [];
let node = {
data: {
id: root.id,
name: root.name,
code: root.code,
parentId: root.parentId,
},
};
this.categoriesFormat.push(node);
this.categoriesFormatStack.push(node);
index++;
categories = categories.filter((c) => c.parentId !== -1);
return this.convertToTreeNode(
categories,
index,
this.categoriesFormat[0]
);
} else {
const newNode = categories.find(
(c) => c.parentId === treeNode.data.id
);
if (typeof newNode !== 'undefined') {
let node = {
data: {
id: newNode.id,
name: newNode.name,
code: newNode.code,
parentId: newNode.parentId,
},
};
if (typeof treeNode.children === 'undefined') {
treeNode.children = [];
}
treeNode.children.push(node);
this.categoriesFormatStack.push(node);
categories = categories.filter((c) => c.id !== newNode.id);
return this.convertToTreeNode(categories, index, treeNode);
} else {
if (categories.length > 0) {
treeNode = this.categoriesFormatStack[index];
index++;
this.convertToTreeNode(categories, index, treeNode);
}
}
}
}

你可以调用this.convertToTreeNode(this.categories， 0(