角度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> 

あなたは私助けてくださいことはできますか？

Answer 1

子供が多い場合は、それ自身を呼び出すコンポーネントを作成する必要があります。同じコンポーネント内にComponentFactoryResolverを使用し、古いコンポーネントの下に新しいコンポーネントを配置する場合は、viewContainerRefを使用します。 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"} 
    ]} 
]