PrimeNG Treenode 组件无法显示数据
Posted
技术标签:
【中文标题】PrimeNG Treenode 组件无法显示数据【英文标题】：Unable to display data in PrimeNG Treenode Component 【发布时间】：2018-08-28 07:46:51 【问题描述】：我正在尝试在 Angular 5 项目中以 Treenode 格式显示数据。
我正在从以下形式的服务中获取数据（对象形式）：
"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[];
我收到如下错误：
错误：
找不到不同的支持对象“[object Object]”
请求您帮助我将对象转换为树节点数组格式。
提前致谢。
【问题讨论】：
您的对象是在您的组件中还是添加到了外部文件中？ 对象正在从我放置在 assets 文件夹中的 .json 文件中加载，我正在以这种方式访问它：this.http.get("http://localhost:4200/assets/files.json")
【参考方案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;
希望它应该工作。
【讨论】：
【参考方案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;
【讨论】：
以上是关于PrimeNG Treenode 组件无法显示数据的主要内容，如果未能解决你的问题，请参考以下文章