Подскажите, почему не отображаются данные в моем Tree компоненте. Я пытаюсь использовать PrimeNG tree. Ошибок нету, не могу понять в чем проблема. Мой код:
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 {}
А уже непосредственно period.modal.ts я подключаю как блок в нужное для меня место в контенте
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 ]);