时间戳

首页 > 解决方案 > 角度材质树展示组织结构

angular - 角度材质树展示组织结构

问题描述

我想使用具有职位、薪水、服务年份作为属性的角度材料树来显示组织结构。 

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

名称列是根据组织报告层次结构的树形结构。例如，如果一个经理有三个报告，则经理节点将有三个子节点。

是否可以使用角度材料树控制来做到这一点？

标签： angularangular-materialtreeviewangular-cdk

解决方案

有可能，请参见此处的示例：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组件。）

推荐阅读