Angular 2从数组中生成带有详细信息行的表行答案

【问题标题】：Angular 2 generate table rows with detail rows from arrayAngular 2从数组中生成带有详细信息行的表行
【发布时间】：2017-06-02 21:03:43
【问题描述】：

我有以下数组：

{Test1:aaa,Test2:bbb, Test3:ccc, Test4: ddd, Test5: eee},
{Test1:aaa,Test2:bbb, Test3:ccc, Test4: ddd1, Test5: eee1},
{Test1:aaa,Test2:bbb, Test3:ccc, Test4: ddd2, Test5: eee2},
{Test1:aaa,Test2:bbb, Test3:ccc, Test4: ddd3, Test5: eee3},
...

表格结果如下所示：

 Test1    Test2    Test3   Test4   Test5
 aaa      bbb      ccc     ddd     eee
 aaa      bbb      ccc     ddd1    eee1
 aaa      bbb      ccc     ddd2    eee2
 aaa      bbb      ccc     ddd3    eee3

但我需要有这样的详细视图的表格：

 Test1    Test2    Test3   
 aaa      bbb      ccc     
   ddd     eee
   ddd1    eee1
   ddd2    eee2
   ddd3    eee3
 aaa1     ...       ...
 ...

如何在模板中生成此表？我已经有以下脚本：

<table>
              <colgroup>
                <col *ngFor="let column of columns" [ngStyle]="{'width': column.ratio}">
              </colgroup>
              <tbody>
                <tr *ngFor="let row of dataset; let index=index; let odd=odd; let even=even" 
                [ngClass]="{ odd: odd, alt: even, selectedRow: selectedRow===index }" (click)="select(index)" (dblclick)="dblClickF($event,row)" >

                <td *ngFor="let col of row | values; let first = first;"  [ngClass]="{'first unpack':first}" (click)="unpack(row,first)">{{col}}</td>
                </tr>
              </tbody>
              </table>

你能帮帮我吗？（任何麻烦？）

【问题讨论】：

例如 aaa1 来自哪里？您应该更准确地指定您想要的结果，我认为从示例中不清楚..

标签： arrays angular html-table master-detail

【解决方案1】：

如果它有更多的子组件，您需要创建一个调用自身的组件，您可以在同一个组件内使用ComponentFactoryResolver 并使用 viewContainerRef 将新创建的组件放在旧组件下，检查我创建的这两个 plunker 并查看如果有帮助：

点击展开子数据： https://plnkr.co/HETv1d

递归展开子： https://plnkr.co/WcduaE

另外，如果你的数据结构看起来像这样，你的数据结构会更容易工作：

[
  {"Test1":"aaa",
   "children": [
     {"name" : "Name1"},
     {"name" : "Name2"},
     {"name" : "name3"},
     {"name" : "name4"}
   ]},
  {"Test2": "bbb",
     "children": [
     {"name" : "Name1"},
     {"name" : "Name2"},
     {"name" : "name3"},
     {"name" : "name4"}
  ]},
  {"Test3": "ccc",
     "children": [
     {"name" : "Name1"},
     {"name" : "Name2"},
     {"name" : "name3"},
     {"name" : "name4"}
  ]}
]

【讨论】：