Как развернуть все узлы в динамике? - PullRequest
0 голосов
/ 26 марта 2019

В настоящее время я работаю над созданием компонента динамического дерева с флажками. Идея состоит в том, чтобы расширить все потомки узла, когда он выбран. Я пытаюсь использовать для этого метод 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>```
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...