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

Question

我需要以分层方式显示某些对象，如下所示。

此层次结构已修复，无需动态子节点。

任何css演示代码都会有所帮助。 感谢。

Answer 1

创建一些Item组件并以递归方式调用它的模板：

@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(){

  }

}

简单课程：

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>

我-item.component.css：

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


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

StackBlitz EXAMPLE

<强>结果：

Answer 2

以下是一些使用ul和li创建树状结构的CSS：

＆＃13;

＆＃13;

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);   
   }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;