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

Question

我正在尝试在 angular 5 项目中以 Treenode 格式显示数据。

我从以下形式的服务中获取数据（object 形式）：

    {
  "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 Object]'

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

提前致谢。

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)