用于显示组织结构的角度材料树
用于显示组织结构的角度材料树
提问于 2019-10-09 06:01:08
我想使用角度材料树来显示组织结构，并将职位、工资、服务年限作为属性。
class Employee {
name: string;
position: string;
salary: number;
yearofServices: number;
reports: Employee[];
}例如,
[
{id: 1,
name:'employee1',
position: 'president',
salary: 250000,
yearofServices: 20,
reports: [
{
id: 2,
name:'employee2',
position: 'manager',
salary: 200000,
yearofServices: 10,
},
{
id: 3,
name:'employee3',
position: 'manager',
salary: 190000,
yearofServices: 15,
}
];
]我们想要显示四列：
姓名、职位、薪水YearOfService
名称列是按组织报表层次结构的树形结构。例如，如果经理有三个报表，则经理节点将有三个子节点。
是否可以使用角度材质树控件来完成此操作？
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-12-25 00:28:05
这是可能的，请参阅此处的示例：https://stackblitz.com/edit/angular-m77g7e-semvxp?file=app%2Ftable-basic-example.html
在https://github.com/angular/components/issues/15187中引用。
另一种选择是使用两个mat-tree组件，一个用于遍历层次结构，另一个用于固定列。可以使用treeControl.isExpanded(node)切换这两个零部件上的可见性。(这也适用于cdk-tree组件。)
Stack Overflow用户
发布于 2019-10-09 06:53:09
当然这是可能的！它只是一个允许HTML的指令。
我并没有把所有的存根都去掉，但它的要点非常简单：
const TREE_DATA: Employee[] = [
{
name: 'Bob',
position:'President of Lattes'
}, {
name: 'Becky',
position: 'Manager Of Latte Presidents',
reports: [{
name: 'Bob',
position:'President of Lattes'
}, {
name: 'Steve',
position: 'President of Mocha-Locha'
},
{
name: 'Arnie',
position: 'President of Tepid-Teas',
reports: [
{
name: 'Mick',
position: 'Loose orders for loose leaf'
},
{
name: 'Michelle',
position: 'The First With The Green'
}
]
}
]
},
];和HTML
<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>
<div class="container-fluid">
<div class="row">
<div class="col">{{node.name}}</div>
<div class="col">{{node.position}}</div>
<div class="col">salary here</div>
<div class="col">Years of Service</div>
</div>
</div>
</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>
<div class="container-fluid">
<div class="row">
<div class="col">{{node.name}}</div>
<div class="col">{{node.position}}</div>
<div class="col">salary</div>
<div class="col">0</div>
</div>
</div>
</div>
<ul [class.example-tree-invisible]="!treeControl.isExpanded(node)">
<ng-container matTreeNodeOutlet></ng-container>
</ul>
</li>
</mat-nested-tree-node>
</mat-tree>要真正看到它，您可以查看StackBlitz
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58294583
复制相关文章
相似问题
腾讯云开发者
