我有一个如下的数据结构：
testResults: {
children: [
{
type: "testGroup",
name: "group-1",
result: "pass"
children: [
{
type: "testGroup", // nested test group
name: "group-1-1",
result: "pass",
children: [
{
type: "testCase",
name: "case-1-1-1",
result: "pass",
children: [
{
type: "testBlock",
name: "testblock-1-1-1-1",
result: "pass"
},
{
type: "testBlock",
name: "testblock-1-1-1-2",
result: "pass"
}
]
}
]
}
]
}
]
}
测试组可以嵌套很多级别。例如：
- 测试组 1
---儿童测试组1-1
-----child孩子测试组1-1-1
-------child child 孩子测试组1-1-1-1
---------测试用例1-1-1-1-1
------------测试块1-1-1-1-1-1
请注意，嵌套组的数量会有所不同。
我想在下表中显示这个数据结构：
是否可以在不编写任何 js 代码的情况下在 angularjs 2.0 中完成它？
如果没有 js 代码，我的意思是只使用 angularjs 2.0 指令（例如 ngFor.）。
我试过使用 ngFor 如下，但它会弄乱 DOM 结构：
<tr *ngFor="let item of data.testResults.children; let i = index">
<td>{{item.name}}</td>
<td>{{item.result}}</td>
<div *ngIf="item.children && item.children.length > 0">
<tr *ngFor="let s1 of item.children; let i1 = index ">
<td>{{s1.name}}</td>
<td>{{s1.result}}</td>
</tr>
</div>
</tr>
即使上面的代码有效，我仍然不知道应该使用多少嵌套的 ngFor 指令。
所以我想知道 angularjs 2.0 中是否有任何相当于 WPF HierarchicalDataTemplate 和 DataTemplate 的东西？