重设Mat tree angle 7材质

Question

如果有人展开其中一个孩子，则决定他要重置所有内容。我创建了一个清晰的按钮，用户可以单击它。我尝试了几件事，但没有任何效果。不知道我是否必须有权访问该节点。关于如何将整个mat-tree重置为首次加载时的状态的任何想法？

 
    public nestedTreeControl: NestedTreeControl<ITreeNode>;
    public nestedDataSource: MatTreeNestedDataSource<ITreeNode>;
    public checklistSelection = new SelectionModel<ITreeNode>(true);
    constructor(
        private changeDetectorRef: ChangeDetectorRef,
        private dialogRef: MatDialogRef<GlobeSourceFacetsComponent>
    ) {
        this.nestedTreeControl = new NestedTreeControl<ITreeNode>(
            this.getChildren
        );
        this.nestedDataSource = new MatTreeNestedDataSource();
        this.nestedDataSource.data = TREE_DATA;
    }

    public hasNestedChild = (_: number, nodeData: ITreeNode) =>
        nodeData.children.length > 0;

    public getChildren = (node: ITreeNode) => node.children;

    public changeState(node) {
        node.expanded = !node.expanded;
    }

    public descendantsAllSelected(node: ITreeNode): boolean {
        const descendants = this.nestedTreeControl.getDescendants(node);
        if (!descendants.length) {
            return this.checklistSelection.isSelected(node);
        }
        const selected = this.checklistSelection.isSelected(node);
        const allSelected = descendants.every(child =>
            this.checklistSelection.isSelected(child)
        );
        if (!selected && allSelected) {
            this.checklistSelection.select(node);
            this.changeDetectorRef.markForCheck();
        }
        return allSelected;
    }

    public descendantsPartiallySelected(node: ITreeNode): boolean {
        const descendants = this.nestedTreeControl.getDescendants(node);
        if (!descendants.length) {
            return false;
        }
        const result = descendants.some(child =>
            this.checklistSelection.isSelected(child)
        );
        return result && !this.descendantsAllSelected(node);
    }

    public toggleItemSelection(node: ITreeNode): void {
        this.checklistSelection.toggle(node);
        const descendants = this.nestedTreeControl.getDescendants(node);
        this.checklistSelection.isSelected(node)
            ? this.checklistSelection.select(...descendants)
            : this.checklistSelection.deselect(...descendants);
        this.changeDetectorRef.markForCheck();
    }

    public apply() {
        this.dialogRef.close();
    }

    public clear() {
        this.nestedTreeControl.collapseAll()
        this.nestedDataSource.data = TREE_DATA;
    }
}

<div class="facets-container">
    <div class="tree-container">
        <mat-tree
            [dataSource]="nestedDataSource"
            [treeControl]="nestedTreeControl"
            class="facet-tree"
        >
            <mat-tree-node *matTreeNodeDef="let node" disabled="true">
                <li class="mat-tree-node">
                    <button mat-icon-button disabled></button>
                    <mat-checkbox
                        class="checklist-leaf-node"
                        [checked]="checklistSelection.isSelected(node)"
                        (change)="toggleItemSelection(node)"
                        >{{ node.name }}</mat-checkbox
                    >
                </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
                                        ? 'chevron_right'
                                        : 'expand_more'
                                }}
                            </mat-icon>
                        </button>
                        <mat-checkbox
                            *ngIf="node.name !== ''"
                            class="checklist-leaf-node"
                            [checked]="checklistSelection.isSelected(node)"
                            [indeterminate]="descendantsPartiallySelected(node)"
                            (change)="toggleItemSelection(node)"
                            >{{ node.name }}</mat-checkbox
                        >
                    </div>
                    <ul [class.facet-tree-invisible]="node.expanded">
                        <ng-container matTreeNodeOutlet></ng-container>
                    </ul>
                </li>
            </mat-nested-tree-node>
        </mat-tree>
    </div>
    <div class="facet-actions">
        <button mat-button (click)="clear()">CLEAR</button>
        <button mat-button color="primary" (click)="apply()">APPLY</button>
    </div>
</div>