这个问题通常是由于Angular Material Tree组件不会在每个扩展节点状态改变时保持其状态所致。为了解决这个问题,我们可以创建一个新的属性来保存已扩展的节点的状态,并在组件中添加一个扩展节点事件监听器,以及一个在组件初始化时执行的函数。
以下是示例代码:
在组件类中添加以下代码:
expandedNodes: string[] = [];
constructor(private treeControl: FlatTreeControl, private database: FileDatabase) {
this.treeControl.expansionModel.changed.subscribe(change => {
if (change.added) {
change.added.forEach(node => this.toggleNode(node, true));
}
if (change.removed) {
change.removed.slice().reverse().forEach(node => this.toggleNode(node, false));
}
});
}
ngOnInit() {
this.database.initialize().subscribe(() => {
this.treeControl.dataNodes = this.database.data;
this.expandedNodes.forEach(node => {
this.treeControl.expand(this.treeControl.dataNodes.find(n => n.filename === node));
});
});
}
toggleNode(node, expand) {
if (expand) {
this.expandedNodes.push(node.filename);
} else {
const index = this.expandedNodes.indexOf(node.filename);
if (index >= 0) {
this.expandedNodes.splice(index, 1);
}
}
}
在这个例子中,我们创建了一个数组expandedNodes
用来保存已扩展的节点的状态。在构造函数中,我们添加一个事件监听器,以在扩展节点时更新该数组。在ngOnInit()
方法中,我们初始化数据,并使用this.expandedNodes
数组来展开缓存的节点。最后,我们添加一个toggleNode()
方法,用来更新expandedNodes
数组中每个节点的状态。
希望这个解决方法能够帮助你解决Angular Material Tree无法保持扩展节点状态的问题。