angular--material---tree

在项目中需要用到tree，但是material的不同的tree有不同的用法。在未深入研究使用别人的案例时，踩了一个大坑，导致需求一直未能做出来，现在特此来记录一下使用。

1. DynamicDataSource---tree

不能够实现tree的完全expand/collapse.

 
   
     
     
      {{node.counterNode.name}}
   
                       matTreeNodePaddingIndent="25" [ngClass]="{'header': node.level == 0}"
                   (click)="toggleNotLoadingNode(node);">
                    [attr.aria-label]="'toggle ' + node.counterNode.name" matTreeNodeToggle *ngIf="node.level != 0">
       
          {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
       
     
      {{node.counterNode.name }}
     

   
 

2. TreeFlatOverviewExample----tree

能够实现tree的完全expand/collapse.

 

    Counters
    ExpandAll  
    CollapseAll
 

 
   
   
     
     
      {{node.counterNode.name}}
   
   
   
                    [attr.aria-label]="'toggle ' + node.counterNode.name">
       
          {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
       
     
      {{node.counterNode.name}}