我正在尝试在我的应用中设置“材料树”。与mat-table f.ex.相比,这相当复杂,但是我设法获取数据并显示了这一点。但是,我只能显示所有名称,而不是扩展/折叠它们的子代。我收到错误
cannot read property treeControl of undefined
在单击项目时。我尝试了另一篇SO-post的建议,然后又遇到了另一个错误
cannot read property length of undefined
我该如何解决?这是我现在拥有的代码:
overview.component.html
<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
example-tree-invisible {display: none;}
.example-tree ul,
.example-tree li {
margin-top: 0;
margin-bottom: 0;
list-style-type: none;
}
overview.module.ts
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,
MatIconModule,
MatButtonModule
],
declarations: [OverviewComponent]
})
export class OverviewModule { }
overview.component.ts
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;
}
}
答案 0 :(得分:1)
好的,虽然我已经有了Angular 7(手动升级),但是我遇到了同样的问题。
为了解决这个问题,我创建了一个新的Angular项目(使用ng new),并确保package.json中的所有软件包版本都与我的项目的版本匹配。 然后,我用新项目中的文件替换了tsconfig.json文件。
然后它起作用了。我想有些依赖,例如@ angular / cdk,与我以前的tsconfig.json不兼容。
我希望任何来这里的人都能有所帮助。
答案 1 :(得分:1)
添加另一个答案,以防他人受到帮助。我也遇到了这个问题。我在库模块中使用树,然后将该模块导入到我的应用程序中。当我运行我的应用程序时,树可以正常工作,但是当我为模块提供服务时却没有。我必须将target
中的tsconfig.lib.json
从es2015
更改为es5
才能正常工作。
答案 2 :(得分:0)
似乎matTreeNodeToggle
仅在mat-tree-node
或mat-nested-tree-node
标签级别上稳定工作。要从这些标签的下一级切换,请使用(click)="nestedTreeControl.toggle(node)"