Angular 2. Data is not displayed in the Tree component

Tell me why the data is not displayed in my Tree component. I am trying to use PrimeNG tree . There are no errors, I can not understand 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 I directly connect period.modal.ts as a block to 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 ]);