Angular 2. Data in Tree are not displayed



  • Tell me why the data are not displayed in my Tree. I'm trying to use it. http://www.primefaces.org/primeng/#/tree ♪ There's no mistake, I don't know what the problem is. My code is:

    node.service.ts

    import { Injectable } from '@angular/core';
    import {TreeNode} from "primeng/primeng";
    

    @Injectable()
    export class NodeService {

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

    period.tree.ts

    import { Component, OnInit } from '@angular/core';
    import {Tree, TreeNode} from 'primeng/primeng';
    import {NodeService} from './node.service';

    @Component({
    selector: 'period-tree',
    template: <p-tree [value]="files"></p-tree> ,
    directives: [Tree],
    providers: [NodeService]
    })
    export class PeriodTree implements OnInit {
    files: TreeNode[];
    constructor(private nodeService: NodeService) {}
    ngOnInit() {
    this.files = this.nodeService.getFiles();
    }
    }

    period.modal.ts

    import { Component } from '@angular/core';
    import {PeriodTree} from '../app.tree/period.tree';

    @Component({
    selector: 'period-modal',
    template: <div class="modal-dialog modal-md" style="height: 550px;"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" style="color:#fff">×</button> <h4 class="modal-title">Изменить период (05/2016)</h4> </div> <div class="modal-body"> <period-tree></period-tree> </div> <div class="modal-footer" style="padding-right: 550px;"> <button class="btn btn-default" data-dismiss="modal">Ок</button> </div> </div> </div>,
    directives: [PeriodTree]
    })
    export class PeriodModal {}

    And now it's just a period.modal.ts, I'm running as a block in the right place for me in the content.

    main.ts

    import { bootstrap }    from '@angular/platform-browser-dynamic';
    import { AppComponent } from './app.component';
    import {LocalStorageService, LocalStorageSubscriber} from 'angular2-localstorage/LocalStorageEmitter';
    import {NodeService} from './app.tree/node.service';

    bootstrap(AppComponent, [ LocalStorageService, NodeService ]);



  • I found the problem, I misrepresented the data. That would be right: node.service.ts

    import { Injectable } from '@angular/core';
    import {TreeNode} from "primeng/primeng";
    

    @Injectable()
    export class NodeService {

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

    ];
    

    }
    }


Log in to reply
 


Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2