角2生成我具有以下陣列從陣列

Question

細節行表中的行：

{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> 

你能幫我嗎？ （任何plunkr？）

Answer 1

你需要創建一個組件，如果它有更多的子組件，你可以在同一個組件和viewContainerRef中使用ComponentFactoryResolver將新創建的組件放在舊組件中，檢查這兩個重擊器我創建並看看是否有幫助：

展開兒童數據與點擊： https://plnkr.co/HETv1d

遞歸擴展孩子： https://plnkr.co/WcduaE

而且，你的數據結構將是EAS如果看起來像這樣：

[ 
    {"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"} 
    ]} 
]