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">&times;</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"}]
}]
}];}
}
