Angular4创建树形结构

ts文件变量赋值：

list=[{

      id:'1',

      name:'cs'

      children:[{

               id:'2',

               name:'cs2'

                children:[]

                },

                {
        
                id:'2',

                name:'cs3'

                children:[]

                }]

}];

mycontex=

{

   children:list

   $implicit:'hello template'

}

html文件添加标签：

<ul *ngIf='context'>
   <ng-container [ngTemplateOutlet]='mytemplate' [ngTemplateOutletContext]='context'>
    </ng-container> 
</ul>
<ng-template #mytemplate let-children='children'> 
    <li *ngFor='let item of children'>
           <button>{{item.name}}</button>
           <ng-container *ngIf='!item.children.length'>
               <ul>
                    <ng-container [ngTemplateOutlet]='mytemplate'             
                                                    [ngTemplateOutletContext]='item'>
                    </ng-container> 
               </ul>
           </ng-container>
    </li>
</ng-template>