无法折叠/展开材质树(Angular 6)

我正在尝试在我的应用中设置Material Tree.与mat-table f.ex.相比,这相当复杂,但我设法获取数据并显示出来.但是,我只能展示所有名字,而不是扩展/折叠他们的孩子.我收到了错误

@H_675_7@cAnnot read property treeControl of undefined

点击项目时.我尝试了另一个SO帖子的建议,然后我得到了一个额外的错误

@H_675_7@cAnnot read property length of undefined

我该如何解决这个问题？这是我现在的代码：

overview.component.html

@H_675_7@<mat-tree [datasource]="nestedDatasource" [treeControl]="nestedTreeControl" class="example-tree"> <mat-tree-node *matTreeNodeDef="let node"> <li class="mat-tree-node"> <button mat-icon-button disabled></button> {{ node.name }} </li> </mat-tree-node> <mat-nested-tree-node *matTreeNodeDef="let node; when: hasnestedChild"> <li> <div class="mat-tree-node"> <button mat-icon-button matTreeNodeToggle [attr.aria-label]="'toggle ' + node.name"> <mat-icon class="mat-icon-rtl-mirror"> {{nestedTreeControl.isExpanded(nodE) ? 'expand_more' : 'chevron_right'}} </mat-icon> </button> {{node.namE}} </div> <ul [class.example-tree-invisible]="!nestedTreeControl.isExpanded(nodE)"> <ng-container matTreeNodeOutlet></ng-container> </ul> </li> </mat-nested-tree-node> </mat-tree>

overview.component.scss

@H_675_7@example-tree-invisible {display: none;} .example-tree ul,.example-tree li { margin-top: 0; margin-bottom: 0; list-style-type: none; }

overview.module.ts

@H_675_7@import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { OverviewComponent } from './overview.component'; import { MatTreeModule,MatIconModule,MatButtonModule } from '@angular/material'; @NgModule({ imports: [ CommonModule,MatTreeModule,MatButtonModule ],declarations: [OverviewComponent] }) export class OverviewModule { }

overview.component.ts

@H_675_7@import { Component,OnInit } from '@angular/core'; import { httpClient } from '@angular/common/http'; import { MatTreenestedDatasource } from '@angular/material'; import { nestedTreeControl } from '@angular/cdk/tree'; import { of as observabLeof } from 'rxjs'; export class Group { name: String; } export class MasterGroup extends Group { childGroups: Array<Group>; } @Component({ SELEctor: 'app-overview',templateUrl: './overview.component.html',styleUrls: ['./overview.component.scss'] }) export class OverviewComponent implements OnInit { nestedTreeControl: nestedTreeControl<Group>; nestedDatasource: MatTreenestedDatasource<MasterGroup>; constructor(private http: httpClient) { this.nestedTreeControl = new nestedTreeControl<Group>(this._getChildren); this.nestedDatasource = new MatTreenestedDatasource(); this.getGroups(); } ngOnInit() { } private _getChildren = (node: MasterGroup) => { return observabLeof(node.childGroups); } getGroups() { const data = [ { name: 'test',childGroups: [ { name: 'inner test' },{ name: 'inner test 2' } ] },{ name: 'test 2',childGroups: [ { name: 'another test' } ] },{ name: 'test 3',childGroups: [] } ]; this.nestedDatasource.data = data; } hasnestedChild = (_: number,nodeData: MasterGroup) => { /*if (nodeData.childGroups) { // I get an error using .length here - without it shows all groups // When clicking item it gives error 'cAnnt read property treeControl of undefined' return true; } else { return false; } */ // tried this line from another SO-post,I then get both errors at same time return nodeData.childGroups.length; } }