В настоящее время я пытаюсь разработать древовидную структуру для динамических данных, используя компонент дерева угловых материалов, и я следовал приведенному ниже примеру кода:
https://stackblitz.com/edit/material-tree-dynamic
Поскольку дерево, которое яразработали не работает должным образом, я скопировал выше код, как он есть, и попытаться запустить на моем компьютере.но функциональность свертывания не работает.Вот мой файл машинописного текста (html точно такой же):
import {Component, Injectable} from '@angular/core';
import {FlatTreeControl} from '@angular/cdk/tree';
import {CollectionViewer, SelectionChange} from '@angular/cdk/collections';
import {BehaviorSubject} from 'rxjs/BehaviorSubject';
import {Observable} from 'rxjs/Observable';
import {merge} from 'rxjs/observable/merge';
import {map} from 'rxjs/operators/map';
/** Flat node with expandable and level information */
export class DynamicFlatNode {
constructor(public item: string, public level: number = 1, public expandable: boolean = false, public isLoading: boolean = false) {}
}
/**
* Database for dynamic data. When expanding a node in the tree, the data source will need to fetch
* the descendants data from the database.
*/
export class DynamicDatabase {
dataMap = new Map([
['Simulation', ['Factorio', 'Oxygen not included']],
['Indie', [`Don't Starve`, 'Terraria', 'Starbound', 'Dungeon of the Endless']],
['Action', ['Overcooked']],
['Strategy', ['Rise to ruins']],
['RPG', ['Magicka']],
['Magicka', ['Magicka 1', 'Magicka 2']],
[`Don't Starve`, ['Region of Giants', 'Together', 'Shipwrecked']]
]);
rootLevelNodes = ['Simulation', 'Indie', 'Action', 'Strategy', 'RPG'];
/** Initial data from database */
initialData(): DynamicFlatNode[] {
return this.rootLevelNodes.map(name => new DynamicFlatNode(name, 0, true));
}
getChildren(node: string): string[] | undefined {
return this.dataMap.get(node);
}
isExpandable(node: string): boolean {
return this.dataMap.has(node);
}
}
/**
* File database, it can build a tree structured Json object from string.
* Each node in Json object represents a file or a directory. For a file, it has filename and type.
* For a directory, it has filename and children (a list of files or directories).
* The input will be a json object string, and the output is a list of `FileNode` with nested
* structure.
*/
@Injectable()
export class DynamicDataSource {
dataChange: BehaviorSubject<DynamicFlatNode[]> = new BehaviorSubject<DynamicFlatNode[]>([]);
get data(): DynamicFlatNode[] { return this.dataChange.value; }
set data(value: DynamicFlatNode[]) {
this.treeControl.dataNodes = value;
this.dataChange.next(value);
}
constructor(private treeControl: FlatTreeControl<DynamicFlatNode>,
private database: DynamicDatabase) {}
connect(collectionViewer: CollectionViewer): Observable<DynamicFlatNode[]> {
this.treeControl.expansionModel.onChange!.subscribe(change => {
if ((change as SelectionChange<DynamicFlatNode>).added ||
(change as SelectionChange<DynamicFlatNode>).removed) {
this.handleTreeControl(change as SelectionChange<DynamicFlatNode>);
}
});
return merge(collectionViewer.viewChange, this.dataChange).pipe(map(() => this.data));
}
/** Handle expand/collapse behaviors */
handleTreeControl(change: SelectionChange<DynamicFlatNode>) {
if (change.added) {
change.added.forEach((node) => this.toggleNode(node, true));
}
if (change.removed) {
change.removed.reverse().forEach((node) => this.toggleNode(node, false));
}
}
/**
* Toggle the node, remove from display list
*/
toggleNode(node: DynamicFlatNode, expand: boolean) {
const children = this.database.getChildren(node.item);
const index = this.data.indexOf(node);
if (!children || index < 0) { // If no children, or cannot find the node, no op
return;
}
if (expand) {
node.isLoading = true;
setTimeout(() => {
const nodes = children.map(name =>
new DynamicFlatNode(name, node.level + 1, this.database.isExpandable(name)));
this.data.splice(index + 1, 0, ...nodes);
// notify the change
this.dataChange.next(this.data);
node.isLoading = false;
}, 1000);
} else {
this.data.splice(index + 1, children.length);
this.dataChange.next(this.data);
}
}
}
@Component({
selector: 'app-audience-tree',
templateUrl: './audience-tree.component.html',
styleUrls: ['./audience-tree.component.css'],
providers: [DynamicDatabase]
})
export class AudienceTreeComponent{
constructor(database: DynamicDatabase) {
this.treeControl = new FlatTreeControl<DynamicFlatNode>(this.getLevel, this.isExpandable);
this.dataSource = new DynamicDataSource(this.treeControl, database);
this.dataSource.data = database.initialData();
}
treeControl: FlatTreeControl<DynamicFlatNode>;
dataSource: DynamicDataSource;
getLevel = (node: DynamicFlatNode) => { return node.level; };
isExpandable = (node: DynamicFlatNode) => { return node.expandable; };
hasChild = (_: number, _nodeData: DynamicFlatNode) => { return _nodeData.expandable; };
}
Когда я сверну корневой узел, имеющий более 1 дочернего уровня , этот результат будет получен
Так, ребята, кто-нибудь может сказать мне, что является причиной этого?И как я могу это исправить?Это было бы очень полезно.