angular material 显示组织结构的树

Question

我想使用 angular material 树来显示组织结构，并将职位、薪水、服务年限作为属性。

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,
    }
   ];
]

我们要显示四列：

姓名职位薪资服务年份

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

是否可以使用 angular material 树控件来做到这一点？

Answer 1

当然有可能！它只是一个允许 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

Answer 2

这是可能的，请看这里的例子：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 组件。）

angular material 显示组织结构的树

angular material tree to display organization structure

treeview

angular-material

angular

angular-cdk