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，就可以了。

根据选定的mat-tree节点显示mat-table数据

1 个答案: