如何使用angularjs 2.0中的表显示嵌套数据结构

Question

我的数据结构如下： 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" } ] } ] } ] } ] } 测试组可以嵌套多个级别。例如：

-test group 1

---儿童测试组1-1

-----儿童儿童测试组1-1-1

-------儿童儿童测试组1-1-1-1

---------测试案例1-1-1-1-1

-----------测试块1-1-1-1-1-1

请注意，嵌套组的数量会有所不同。

我想在表格中显示这个数据结构，如下所示：

是否可以在angularjs 2.0中完成而无需编写任何js代码？

没有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等效？