Home.component.html
<mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
<mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle matTreeNodePadding>
<button mat-icon-button disabled></button>
<mat-icon class="type-icon" [attr.aria-label]="node.type + 'icon'">
{{ node.type ==='file' ? 'description' : 'folder' }}
</mat-icon>
{{node.name}}
</mat-tree-node>
<mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding>
<button mat-icon-button matTreeNodeToggle
[attr.aria-label]="'toggle ' + node.name">
<mat-icon class="mat-icon-rtl-mirror">
{{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
</mat-icon>
</button>
<mat-icon class="type-icon" [attr.aria-label]="node.type + 'icon'">
{{ node.type ==='file' ? 'description' : 'folder' }}
</mat-icon>
{{node.name}}
</mat-tree-node>
</mat-tree>
Home.component.ts
import { Component } from '@angular/core';
import { MatTreeFlatDataSource, MatTreeFlattener } from '@angular/material/tree';
import { of as observableOf } from 'rxjs';
import { FlatTreeControl } from '@angular/cdk/tree';
// import { files } from './example-data';
/** File node data with nested structure. */
export interface FileNode {
name: string;
type: string;
children?: FileNode[];
}
/** Flat node with expandable and level information */
export interface TreeNode {
name: string;
type: string;
level: number;
expandable: boolean;
}
export const files = [
{
name: 'material2',
type: 'folder',
children: [
{
name: 'src',
type: 'folder',
children: [
{
name: 'cdk',
children: [
{ name: 'package.json', type: 'file' },
{ name: 'BUILD.bazel', type: 'file' },
]
},
{ name: 'lib', type: 'folder' }
]
}
]
},
{
name: 'angular',
type: 'folder',
children: [
{
name: 'packages',
type: 'folder',
children: [
{ name: '.travis.yml', type: 'file' },
{ name: 'firebase.json', type: 'file' }
]
},
{ name: 'package.json', type: 'file' }
]
},
{
name: 'angularjs',
type: 'folder',
children: [
{ name: 'gulpfile.js', type: 'file' },
{ name: 'README.md', type: 'file' }
]
}
];
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
/** The TreeControl controls the expand/collapse state of tree nodes. */
treeControl: FlatTreeControl<TreeNode>;
/** The TreeFlattener is used to generate the flat list of items from hierarchical data. */
treeFlattener: MatTreeFlattener<FileNode, TreeNode>;
/** The MatTreeFlatDataSource connects the control and flattener to provide data. */
dataSource: MatTreeFlatDataSource<FileNode, TreeNode>;
constructor() {
this.treeFlattener = new MatTreeFlattener(
this.transformer,
this.getLevel,
this.isExpandable,
this.getChildren);
this.treeControl = new FlatTreeControl<TreeNode>(this.getLevel, this.isExpandable);
this.dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
this.dataSource.data = files;
}
/** Transform the data to something the tree can read. */
transformer(node: FileNode, level: number) {
return {
name: node.name,
type: node.type,
level: level,
expandable: !!node.children
};
}
/** Get the level of the node */
getLevel(node: TreeNode) {
return node.level;
}
/** Return whether the node is expanded or not. */
isExpandable(node: TreeNode) {
return node.expandable;
};
/** Get the children for the node. */
getChildren(node: FileNode) {
return observableOf(node.children);
}
/** Get whether the node has children or not. */
hasChild(index: number, node: TreeNode){
return node.expandable;
}
}
src / app / modules / home / home.component.ts（349,5）中的错误：错误TS2322：键入'（{名称：字符串；类型：字符串；子代：{名称：字符串；类型：字符串；孩子：（{名称：字符串；孩子：{名称：字符串；类型：字符串；} []；类型？：未定义；} | {名称：字符串；类型：字符串；儿童？：未定义；}）[]；} [];} | {...;}）[]'不可分配给'FileNode []'类型。 输入'{name：string;类型：字符串；子代：{名称：字符串；类型：字符串；儿童：（{名称：字符串；儿童：{名称：字符串；类型：字符串；} []；类型？：undefined;} | {名称：字符串；类型：字符串；儿童？：未定义；}）[]； } []; } | {...; }”不可分配给“ FileNode”类型。 输入'{name：string;类型：字符串；子代：{名称：字符串；类型：字符串；儿童：（{名称：字符串；儿童：{名称：字符串；类型：字符串；} []；类型？：undefined;} | {名称：字符串；类型：字符串；儿童？：未定义；}）[]； } []; }”不可分配给“ FileNode”类型。 属性“子级”的类型不兼容。 输入'{name：string;类型：字符串；儿童：（{名称：字符串；儿童：{名称：字符串；类型：字符串；} []；类型？：undefined;} | {名称：字符串；类型：字符串；儿童？：未定义；}）[]； } []'不能分配给'FileNode []'类型。 输入'{name：string;类型：字符串；子代：（{名称：字符串；子代：{名称：字符串；类型：字符串；} []；类型？：未定义；} | {名称：字符串；类型：字符串；子代？：未定义；}）[]； }”不可分配给“ FileNode”类型。 属性“子级”的类型不兼容。 类型'（{{名称：字符串；子代：{名称：字符串；类型：字符串；} []；类型？：未定义；} | {名称：字符串；类型：字符串；子代？：未定义；}）[]'是不可分配给'FileNode []'类型。 输入'{name：string;子代：{名称：字符串；类型：字符串； } [];类型？：未定义； } | {name：string;类型：字符串；孩子们？ }”不可分配给“ FileNode”类型。 输入'{name：string;子代：{名称：字符串；类型：字符串； } [];类型？：未定义； }”不能分配给“ FileNode”类型。