Angular 基于所选材料树节点显示材料表数据

Angular 基于所选材料树节点显示材料表数据,angular,angular-material,Angular,Angular Material,我使用Mat-tree来显示一些层次数据。我还想在我的树的右边用一张垫子桌子。当我单击任何树节点时,表应该显示所选树节点的子节点。因此,每次单击左侧树节点时,表数据都应该使用相应的子节点进行更新 <tree-node (click)="showChildren(node)"> showChildren(node) { this.tableDataSource = node.children; } 下面是我的示例代码,无法获取节点名称 app.component.html

我使用Mat-tree来显示一些层次数据。我还想在我的树的右边用一张垫子桌子。当我单击任何树节点时,表应该显示所选树节点的子节点。因此,每次单击左侧树节点时,表数据都应该使用相应的子节点进行更新

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

showChildren(node) {
    this.tableDataSource = node.children;
}
下面是我的示例代码,无法获取节点名称

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>

  • {{node.name}
  • {{treeControl.isExpanded(节点)?'expand_more':'chevron_right'} {{node.name}
  • {{node.name}
    您可以创建一个非常简单的逻辑,将
    单击功能添加到树节点。基本上,当您单击一个节点时,该函数将被调用——它将使用节点子节点设置表数据

    <tree-node (click)="showChildren(node)">
    
    showChildren(node) {
        this.tableDataSource = node.children;
    }
    
    
    showChildren(节点){
    this.tableDataSource=node.children;
    }
    

    您可以将此函数添加到自己偏好的元素中。例如
  • 。只要元素引用了
    节点
    ,您就可以了。

    谢谢Dino..工作正常