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