Javascript 如何使用Angular 5指令隐藏和显示表格树行

只需单击需要使用angular 5隐藏和显示的行，即可显示表格树。以下代码将突出显示该行。我试过很多解决办法。请帮助我隐藏表树并显示子行。表树结构如下：父行：1、2、3、4-这需要在初始显示。然后单击父1行，它将显示1.1,1.2的子行

导入{
指令，
渲染器2，
奥尼特，
ElementRef，
主持人：，
主机绑定，
输入
}从“@angular/core”开始；
@指示({
选择器：“[appBetterHighlight]”
})
导出类BetterHighlight指令实现OnInit{
@HostBinding（'style.backgroundColor'）backgroundColor:string；
构造函数（私有elRef:ElementRef，私有呈现器：Renderer2）{}
恩戈尼尼特（）{
this.backgroundColor=this.defaultColor；
//this.renderer.setStyle（this.elRef.nativeElement，'background color'，'blue'）；
}
@HostListener（'mouseenter'）鼠标悬停（eventData:Event）{
//this.renderer.setStyle（this.elRef.nativeElement，'background color'，'blue'）；
this.backgroundColor='blue'；
}
@HostListener（'mouseleave'）mouseleave（事件数据：事件）{
//this.renderer.setStyle（this.elRef.nativeElement，'background color'，'transparent'）；
this.backgroundColor='blue'；
}
}

一
二
三
{{demo.one}
{{demo.two}
{{demo.three}}
{{demo.one}
{{demo.two}
{{demo.three}}

基本上你想要的是手风琴菜单吗？是的，克莱莫尔。我正在寻找带有表格树的手风琴菜单。罗是的，克莱莫尔……我知道他们对这一点有本机支持：，但它看起来不像使用表格，至少在顶层是这样。您可以想象，只需将单个较小的表放入它所期望的包装中即可。如果你想要更复杂的东西，你可能想看看剑道网格：这个链接是angular.js的，它是一个较低的版本。我正在做角形6，。