дерево угловых материалов для отображения организационной структуры - PullRequest
Новая
       39

дерево угловых материалов для отображения организационной структуры

0 голосов
/ 09 октября 2019

Я хочу отобразить организационную структуру, используя угловое дерево материалов с положением, зарплатой, годом обслуживания в качестве свойств. 

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

Имя столбца является древовидной структуройсогласно иерархии отчетов организации. Например, если у менеджера есть три отчета, у узла менеджера будет три подузла.

Возможно ли это сделать с помощью управления угловым деревом материалов?

1 Ответ

2 голосов
/ 09 октября 2019

Конечно, это возможно! Это просто директива, которая допускает HTML.

enter image description here

Я не заглушил ни одного, но суть его очень проста: 

  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

...