Expand/Collapse Material 使用数据布尔值的树 (Angular 7)
Expand/Collapse Material Tree using data boolean (Angular 7)
我正在尝试从它的数据源中获取一个使用布尔值的 Material 树。我正在过滤 datasource.data 输入,这会导致树在每次用户输入内容时崩溃。为避免这种情况,我想在特定行中使用布尔值 expand/collapse material 树。我已经使用 material table 成功地完成了这项工作,但我无法让它与树一起工作。这是我目前所拥有的:
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
[attr.aria-label]="'toggle ' + node.name"
click="changeState(node)">
<mat-icon class="mat-icon-rtl-mirror">
{{node.expanded ? 'expand_more' : 'chevron_right'}}
</mat-icon>
</button>
{{node.name}} ({{node.expanded}})
</div>
<ul [class.example-tree-invisible]="node.expanded">
<ng-container matTreeNodeOutlet></ng-container>
</ul>
</li>
</mat-nested-tree-node>
</mat-tree>
TS-文件:
import {NestedTreeControl} from '@angular/cdk/tree';
import {Component, Injectable} from '@angular/core';
import {MatTreeNestedDataSource} from '@angular/material/tree';
import {BehaviorSubject} from 'rxjs';
/**
* Json node data with nested structure. Each node has a filename and a value or a list of children
*/
export class FileNode {
childGroups: FileNode[];
name: string;
expanded: boolean;
}
/**
* The Json tree data in string. The data could be parsed into Json object
*/
const TREE_DATA = [
{
'name': 'Group 1',
'expanded': false,
'childGroups': [
{
'name': 'Childgroup 1',
'expanded': false,
'childGroups': []
},
{
'name': 'Childgroup 2',
'expanded': false,
'childGroups': [
{
'name': 'Child of child',
'expanded': false,
'childGroups': []
}
]
}
]
},
{
'name': 'Group 2',
'expanded': false,
'childGroups': [
{
'name': 'Childgroup 1',
'expanded': false,
'childGroups': []
},
{
'name': 'Childgroup 2',
'expanded': false,
'childGroups': [
{
'name': 'Child of child',
'expanded': false,
'childGroups': []
}
]
}
]
},
{
'name': 'Group 3',
'expanded': false,
'childGroups': [
{
'name': 'Childgroup 1',
'expanded': false,
'childGroups': []
},
{
'name': 'Childgroup 2',
'expanded': false,
'childGroups': [
{
'name': 'Child of child',
'expanded': false,
'childGroups': []
}
]
}
]
},
]
@Component({
selector: 'tree-nested-overview-example',
templateUrl: 'tree-nested-overview-example.html',
styleUrls: ['tree-nested-overview-example.css']
})
export class TreeNestedOverviewExample {
nestedTreeControl: NestedTreeControl<FileNode>;
nestedDataSource: MatTreeNestedDataSource<FileNode>;
constructor() {
this.nestedTreeControl = new NestedTreeControl<FileNode>(this._getChildren);
this.nestedDataSource = new MatTreeNestedDataSource();
this.nestedDataSource.data = TREE_DATA;
}
hasNestedChild = (_: number, nodeData: FileNode) =>
nodeData.childGroups.length > 0;
private _getChildren = (node: FileNode) => node.childGroups;
changeState(node) {
console.log(node);
node.expanded = !node.expanded;
}
}
来自Angular documentation on User Input:
To bind to a DOM event, surround the DOM event name in parentheses and assign a quoted template statement to it.
你只需要将click改为(click).
我正在尝试从它的数据源中获取一个使用布尔值的 Material 树。我正在过滤 datasource.data 输入,这会导致树在每次用户输入内容时崩溃。为避免这种情况,我想在特定行中使用布尔值 expand/collapse material 树。我已经使用 material table 成功地完成了这项工作,但我无法让它与树一起工作。这是我目前所拥有的:
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
[attr.aria-label]="'toggle ' + node.name"
click="changeState(node)">
<mat-icon class="mat-icon-rtl-mirror">
{{node.expanded ? 'expand_more' : 'chevron_right'}}
</mat-icon>
</button>
{{node.name}} ({{node.expanded}})
</div>
<ul [class.example-tree-invisible]="node.expanded">
<ng-container matTreeNodeOutlet></ng-container>
</ul>
</li>
</mat-nested-tree-node>
</mat-tree>
TS-文件:
import {NestedTreeControl} from '@angular/cdk/tree';
import {Component, Injectable} from '@angular/core';
import {MatTreeNestedDataSource} from '@angular/material/tree';
import {BehaviorSubject} from 'rxjs';
/**
* Json node data with nested structure. Each node has a filename and a value or a list of children
*/
export class FileNode {
childGroups: FileNode[];
name: string;
expanded: boolean;
}
/**
* The Json tree data in string. The data could be parsed into Json object
*/
const TREE_DATA = [
{
'name': 'Group 1',
'expanded': false,
'childGroups': [
{
'name': 'Childgroup 1',
'expanded': false,
'childGroups': []
},
{
'name': 'Childgroup 2',
'expanded': false,
'childGroups': [
{
'name': 'Child of child',
'expanded': false,
'childGroups': []
}
]
}
]
},
{
'name': 'Group 2',
'expanded': false,
'childGroups': [
{
'name': 'Childgroup 1',
'expanded': false,
'childGroups': []
},
{
'name': 'Childgroup 2',
'expanded': false,
'childGroups': [
{
'name': 'Child of child',
'expanded': false,
'childGroups': []
}
]
}
]
},
{
'name': 'Group 3',
'expanded': false,
'childGroups': [
{
'name': 'Childgroup 1',
'expanded': false,
'childGroups': []
},
{
'name': 'Childgroup 2',
'expanded': false,
'childGroups': [
{
'name': 'Child of child',
'expanded': false,
'childGroups': []
}
]
}
]
},
]
@Component({
selector: 'tree-nested-overview-example',
templateUrl: 'tree-nested-overview-example.html',
styleUrls: ['tree-nested-overview-example.css']
})
export class TreeNestedOverviewExample {
nestedTreeControl: NestedTreeControl<FileNode>;
nestedDataSource: MatTreeNestedDataSource<FileNode>;
constructor() {
this.nestedTreeControl = new NestedTreeControl<FileNode>(this._getChildren);
this.nestedDataSource = new MatTreeNestedDataSource();
this.nestedDataSource.data = TREE_DATA;
}
hasNestedChild = (_: number, nodeData: FileNode) =>
nodeData.childGroups.length > 0;
private _getChildren = (node: FileNode) => node.childGroups;
changeState(node) {
console.log(node);
node.expanded = !node.expanded;
}
}
来自Angular documentation on User Input:
To bind to a DOM event, surround the DOM event name in parentheses and assign a quoted template statement to it.
你只需要将click改为(click).