В настоящее время я работаю над созданием компонента динамического дерева с флажками. Идея состоит в том, чтобы расширить все потомки узла, когда он выбран. Я пытаюсь использовать для этого метод expandAllDescendants()
, но по какой-то причине он расширяет только дочерние узлы первого уровня выбранного узла. Я использую Map<TreeNode, TreeNode[]>
для хранения иерархии деревьев. Он основан на этом дереве угловых материалов с примером динамических данных
Я даже пытался использовать @Viewchild()
и затем вызывать метод expand(selectedNode)
в ngAfterViewInit()
, но этот метод дает мне тот же результат, что и выше.
Файл Component.ts
selectAndExpand(treeNode: FlatTreeNode): void {
let stack = new Stack();
stack.pushStack(treeNode.node);
treeNode.node.nodeSelected = !treeNode.node.nodeSelected;
this.treeControl.expandDescendants(treeNode);
while (stack.stack.length !== 0) {
let removedNode = stack.popStack();
removedNode.nodeSelected = treeNode.node.nodeSelected;
if (this.dataSource.database.treeMap.has(removedNode)) {
for (let child of this.dataSource.database.treeMap.get(removedNode)) {
stack.pushStack(child);
}
}
}
HTML-файл
<mat-tree #tree [dataSource]="dataSource" [treeControl]="treeControl">
<mat-tree-node *matTreeNodeDef="let treeNode" matTreeNodePadding>
<button mat-icon-button disabled></button>
<mat-checkbox
class="tree-node-active"
[checked]="treeNode.node.nodeSelected"
(change)="selectAndExpand(treeNode)"
color="warn"
>
{{ treeNode.node.nodeName }}
</mat-checkbox>
</mat-tree-node>
<mat-tree-node
*matTreeNodeDef="let treeNode; when: hasChild"
matTreeNodePadding
>
<button
class="expand-collapse-button"
mat-icon-button
[attr.aria-label]="'toggle ' + treeNode.node.nodeName"
matTreeNodeToggle
>
<mat-icon class="mat-icon-rtl-mirror">
{{
treeControl.isExpanded(treeNode)
? "expand_more"
: "chevron_right"
}}
</mat-icon>
</button>
<mat-checkbox
class="tree-node-active"
[checked]="treeNode.node.nodeSelected"
(change)="selectAndExpand(treeNode)"
color="warn"
>
{{ treeNode.node.nodeName }}
</mat-checkbox>
<mat-progress-bar
*ngIf="treeNode.isLoading"
mode="indeterminate"
class="example-tree-progress-bar"
></mat-progress-bar>
</mat-tree-node>
</mat-tree>```