Показать данные таблицы матов на основе выбранного узла дерева матов

Question

Я использую Mat-tree, чтобы показать некоторые иерархические данные.Я хочу использовать мат-стол справа от моего дерева.Когда я щелкаю по любому узлу дерева, в таблице должен отображаться дочерний узел выбранного узла дерева.Таким образом, при каждом щелчке на узле левой стороны дерева данные таблицы должны обновляться соответствующими дочерними элементами.

Ниже приведен пример кода, в котором я не могу получить имена узлов.

app.component.html

     <div class="main-wrap">
                <div class="tree-div">
      <mat-tree [dataSource]="dataSource" [treeControl]="treeControl" class="example-tree">
        <!-- This is the tree node template for leaf nodes -->
        <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
          <li class="mat-tree-node">
            <!-- use a disabled button to provide padding for tree leaf -->
            <button mat-icon-button disabled></button>
            {{node.name}}
          </li>
        </mat-tree-node>
        <!-- This is the tree node template for expandable nodes -->
        <mat-nested-tree-node *matTreeNodeDef="let node; when: hasChild">
          <li>
            <div class="mat-tree-node">
              <button mat-icon-button matTreeNodeToggle
                      [attr.aria-label]="'toggle ' + node.name">
                <mat-icon class="mat-icon-rtl-mirror">
                  {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
                </mat-icon>
              </button>
              {{node.name}}
            </div>
            <ul [class.example-tree-invisible]="!treeControl.isExpanded(node)">
              <ng-container matTreeNodeOutlet></ng-container>
            </ul>
          </li>
        </mat-nested-tree-node>
      </mat-tree>
    </div>
    <div>
      <div *ngIf="hasChild">
          {{node.name}}
      </div>
    </div>

Answer 1

Вы можете создать очень простую логику добавления функции click к узлам дерева.По сути, когда вы щелкаете по узлу, вызывается функция - и она устанавливает данные вашей таблицы с дочерними узлами.

<tree-node (click)="showChildren(node)">

showChildren(node) {
    this.tableDataSource = node.children;
}

Вы можете добавить эту функцию к элементам по своему усмотрению.Например <li> или <button>.Пока элемент имеет ссылку на node, у вас все в порядке.