无法折叠/取消折叠材质树(角度 6)

Question

>我正在尝试在我的应用程序中设置材质树。与mat-table f.ex.相比，这相当复杂，但是我已经设法获取数据并显示了这一点。但是，我只能显示所有名称，而不是展开/折叠它们的子项。我收到错误

cannot read property treeControl of undefined

单击项目时。我尝试了另一个SO帖子的建议，然后我收到一个额外的错误

cannot read property length of undefined

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

概述.组件.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>

概述.组件.scss

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

概述.模块.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 { }

概述.组件.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;
}
}

Answer 1

添加另一个答案，以防对某人有帮助。 我也遇到了这个问题。 我在库模块中使用树，然后将该模块导入到我的应用程序中。 当我运行我的应用程序时，树工作正常，但是当我提供模块本身时，它没有。 我不得不将tsconfig.lib.jsontarget从es2015更改为es5才能正常工作。

Answer 2

好的，虽然我已经有了 Angular 7(手动升级(，但我遇到了同样的问题。

为了解决这个问题，我创建了一个新的 Angular 项目(使用 ng new(，并确保 package.json 中的所有包版本都与我的项目版本匹配。 然后我用新项目中的文件替换了我的 tsconfig.json 文件。

然后它奏效了。我想有一些依赖项，如@angular/cdk，与我以前的tsconfig.json不兼容。

我希望任何来到这里的人，它也有帮助。

Answer 3

似乎matTreeNodeToggle仅在mat-tree-node或mat-nested-tree-node标签级别稳定工作。要从这些标记的以下级别切换，请使用(click)="nestedTreeControl.toggle(node)"