Cómo hacer un material de mat-tree Componente angular 6.0.1

Estoy tratando de hacer una aplicación basada en mat-tree angular material, pero cuando ejecuto este código no se muestran los valores y no aparece ningún error, ¿cómo puedo resolver esto?

cuando abrimos la aplicación tenemos que mostrar nombres de clase

A continuación he añadido mi código html y componente

 
  • componente:

     const TREE_DATA = [ { "class":"ece", "count":60, "students": [ {"name":"a","id":"11"}, {"name":"b","id":"12"}, {"name":"c","id":"13"}, {"name":"d","id":"14"} ] }, { "class":"mech", "count":60, "students": [ {"name":"r","id":"21"}, {"name":"e","id":"22"}, {"name":"w","id":"23"}, {"name":"q","id":"24"} ] } ]; @Injectable() export class FileDatabase { dataChange = new BehaviorSubject([]); get data(): FileNode[] { return this.dataChange.value; } constructor() { this.initialize(); } initialize() { const dataObject = TREE_DATA; const data = this.buildFileTree(dataObject, 0); this.dataChange.next(data); } buildFileTree(obj: object, level: number): FileNode[] { return Object.keys(obj).reduce((accumulator, key) => { const value = obj[key]; const node = new FileNode(); node.filename = key; if (value != null) { if (typeof value === 'object') { node.children = this.buildFileTree(value, level + 1); } else { node.type = value; } } return accumulator.concat(node); }, []); } } /** * @title Tree with nested nodes */ @Component({ selector: 'tree-nested-overview-example', templateUrl: 'tree-nested-overview-example.html', styleUrls: ['tree-nested-overview-example.css'], providers: [FileDatabase] }) export class TreeNestedOverviewExample { nestedTreeControl: NestedTreeControl; nestedDataSource: MatTreeNestedDataSource; constructor(database: FileDatabase) { this.nestedTreeControl = new NestedTreeControl(this._getChildren); this.nestedDataSource = new MatTreeNestedDataSource(); database.dataChange.subscribe(data => this.nestedDataSource.data = data); } hasNestedChild = (_: number, nodeData: FileNode) => !nodeData.type; private _getChildren = (node: FileNode) => node.children; } 

    aqui esta mi demo

    cuando abro la página debería venir así

    introduzca la descripción de la imagen aquí

    cuando hago clic en ece debería venir así

    introduzca la descripción de la imagen aquí

      One Solution collect form web for “Cómo hacer un material de mat-tree Componente angular 6.0.1”

      Se ha agregado el contenido a continuación {{node: json}}, solo necesita obtener los datos correctos del objeto de nodo.

         
      Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.