Angular 2/4递归表行组件问题

Question

虽然问题类似于this question，但这里的情况不同。

我有一个项目数组，其中包含单个项目和项目组，而这些项目又包含项目和项目组。

我希望将所有这些显示为行。

但该组件显示单列中的所有数据。如何正确映射它们

我使用的逻辑

<table border="1">
    <thead>
        <tr>
            <th>Step No.</th>
            <th>Step Name</th>
            <th>Description</th>
        </tr>
    </thead>
    <tbody>
        <row-detail [data]="data"></row-detail>
    </tbody>
</table>

行详情

<ng-container *ngFor="let step of data">
    <ng-template *ngIf="step.type==='group'; then group; else normal"></ng-template>
    <ng-template #normal>
        <tr>
            <td>{{step.stepno}}</td>
            <td>{{step.stepName}}</td>
            <td>{{step.description}}</td>
        </tr>
    </ng-template>
    <ng-template #group>
        <row-detail [data]="step.data"></row-detail>
    </ng-template>
</ng-container>

plnkr代码

https://plnkr.co/edit/vsD0FOpkbrWdvlycpal9