Angular 带树的有角材质表

您可以在此处看到我的代码：

我需要从表中的子元素创建一棵树，现在我这样做了：

但我需要这样：

也就是说，元素有子元素，我只能输出一个，如何在循环中这样做？ 正如你在循环中看到的，我需要把水平线拿出来

我找到了这样的解决办法，但还有更好的办法吗

component.html

{{column}}
{{元素[列]}}
111
++{{element}json}++

组件技术

从“../shared/services/directory.service”导入{DirectoryService}；
从“@angular/core”导入{Component，OnInit}；
从“@angular/animations”导入{动画、状态、样式、转换、触发器}；
@组成部分({
选择器：'应用程序单元'，
templateUrl:“./units.component.html”，
样式URL:['./units.component.scss']，
动画：[
触发器（'detailExpand'[
状态（'collapped'，样式（{height:'0px'，minHeight:'0'，display:'none'}）），
状态（'expanded'，样式（{height:'*'}）），
过渡（“展开折叠”，动画（“225ms立方贝塞尔（0.4,0.0,0.2,1）”，
]),
],
})
导出类UnitsComponent实现OnInit{
字典={}；
数据源=元素\数据；
columnsToDisplay=['name'，'weight']；
构造函数（私有目录服务：目录服务）{
}
恩戈尼尼特（）{
this.directoryService.getDictionary（）
.订阅（数据=>{
控制台日志（数据）；
this.dictionary=数据；
});
}
}
常量元素_数据=[
{
职位:1,，
名称：“氢”，
重量：1.0079，
符号：“H”，
说明：`氢是一种化学元素，符号为H，原子序数为1。带有标准
原子量为1.008，氢是元素周期表上最轻的元素，
级别：[
{
测试1:‘塔塔’，
测试2:‘vava’
}
]
}, {
职位：2，
名称：'氦'，
重量：4.0026，
符号:"他",，
说明：`氦是一种化学元素，符号为He，原子序数为2。它是一种化学元素
无色、无味、无味、无毒、惰性、单原子气体，在惰性气体中居首位
元素周期表中的一组。它的沸点是所有元素中最低的，
级别：[
{
测试1:‘塔塔’，
测试2:‘vava’
},
{
测试1:‘塔塔’，
测试2:‘vava’
}
]
}, {
职位：3，
名称：'锂'，
重量：6.941，
符号:"李",，
说明：`锂是一种化学元素，符号为Li，原子序数为3。它是一种软物质，
银白色碱金属。在标准条件下，它是最轻的金属，也是
最轻的固体元素，
级别：[
{
测试1:‘塔塔’，
测试2:‘vava’
},
{
测试1:‘塔塔’，
测试2:‘vava’
},
{
测试1:‘塔塔’，
测试2:‘vava’
}
]
}
];

我自己也在做类似的事情，最终我使用了这个软件包

---

，那么简单，那么优雅

有趣的案例。您在mat单元内尝试过ngFor循环吗？我在一间牢房里有按钮，它们很好用。也许你可以在一个单元格中执行更复杂的JS。另外，也可以使用显示/隐藏css。在我早上喝咖啡之前进行头脑风暴：-）td（mat cell）是一个列，我需要使用tr，也就是行，我需要一个循环中的输出，正好是tr，如果你把代码放在它上面，其他人就更容易进行实验。如果愿意，您可以使用我的数据表代码。问：是否有

ng material treetable

的动态数据示例？