Угловое 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

Вам нужно создать компонент, который вызывает себя, если у него больше детей, вы можете использовать ComponentFactoryResolver внутри того же компонента и viewContainerRef, чтобы поместить новый созданный компонент под старый, проверьте эти два plunkers, которые я создал и посмотреть, если это помогает:

расширению детям данных с помощью щелчка: https://plnkr.co/HETv1d

Рекурсивных расширяющих дети: https://plnkr.co/WcduaE

Кроме того, ваша структуры данных была бы э.а.у. ier для работы, если это выглядит так:

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