如何在javascript / Angular4 +中用垂直线显示分层的垂直数据？

Question

I have a requirement to show some objects in a hierarchical manner as shown below.

This hierarchy is fixed and no need of dynamic child node needed.

Any css demo code will be helpful. Thanks.

Answer 1

Create some Item component and recursively call it on it's template:

@Component({
  selector: 'my-item',
  template: `
  <div class="main" *ngFor="let itm of childs">
          <div class='item'>{{itm.name}} </div>
        <my-item [childs] = "itm.childs"> </my-item>

   </div>
  `,
  styleUrls: ['./my-item.component.css']

})
export class ItemComponent {
  @Input() childs: SomeClass[];

  ngOnInit(){

  }

}

Simple class:

export class SomeClass {
  name: string;
  childs: SomeClass[] = [];

  constructor(name: string, childs?: SomeClass[]) {
    this.name = name;
    this.childs = childs;
  }
}

app.component.html:

 <my-item [childs]="[parent]"> </my-item>

my-item.component.css:

:host{
  display: flex;
  width: 100%;
  justify-content: space-between;
  text-align: center;
}


.main{
  min-width: 100px;
  margin: 15px 0;
}

StackBlitz EXAMPLE

Result:

Answer 2

Here is some CSS to create a tree strcture with ul and li :

 ul.tree, ul.tree ul { list-style: none; margin: 0; padding: 0; } ul.tree ul { margin-left: 10px; } ul.tree li { margin: 0; padding: 0 7px; line-height: 20px; color: #369; font-weight: bold; border-left:1px solid rgb(100,100,100); } ul.tree li:last-child { border-left:none; } ul.tree li:before { position:relative; top:-0.3em; height:1em; width:12px; color:white; border-bottom:1px solid rgb(100,100,100); content:""; display:inline-block; left:-7px; } ul.tree li:last-child:before { border-left:1px solid rgb(100,100,100); } 

 <ul class="tree"> <li>2 Hosts </li> <li>10 objects <ul> <li>4 Type a </li> <li>4 Type b </li> <li>4 Type c </li> </ul> </li> </ul>