Невозможно отобразить данные в PrimeNG Treenode Component
Я пытаюсь отобразить данные в формате Treenode в проекте Angular 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[];
Я получаю ошибку, как показано ниже:
Ошибка:
Невозможно найти отличающийся вспомогательный объект '[object Object]'
Прошу вас помочь мне в преобразовании объекта в формат Array of Treenodes.
Заранее спасибо.
3 ответа
Когда вы объявляете тип как 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;
Надеюсь, это сработает.
Вы можете построить files: TreeNode[] свойство в вашем файле.ts с помощью рекурсивной функции, чтобы убедиться, что на него ссылаются правильно:
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;
}
Я решил следующим образом:
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)