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

虽然问题与之相似，但这里的情况不同

我有一个项目数组，其中包含单个项目和项目组，而项目组又可能包含项目和项目组

我想把它们全部显示为行

但是组件在一列中显示所有数据。如何正确映射它们

我用的逻辑

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

{{step.stepno}
{{step.stepName}}
{{step.description}}

plnkr码

---

问题在于

行详细信息

元素从父表继承了

显示：表

样式。我认为这不可能是你喜欢的方式。尤其是不与古老的表结构。使用使用

flex

创建的表可能会得到您想要的结果问题是

行详细信息

元素从父表继承了

显示：表

样式。我认为这不可能是你喜欢的方式。尤其是不与古老的表结构。使用

flex

创建的表可能会得到您想要的结果