Html 角度嵌套CSS Div表对齐问题

我试图用Angular创建自己的树表，但是我遇到的问题是列对齐不正确。我能够成功地递归调用组件，但它以错误的格式显示。基本上，我有以下几点：

• 父组件
  • 具有表标题信息
  • 调用行组件（树表的节点）
• 节点组件
  • 具有表行信息
  • 自称

下面是实际情况

父组件

<div style="display:table;">
  <div style="display: table-header-group; font-weight:bold;">
    <div style="display:table-cell;padding 3px 10px;">Column A</div>
    <div style="display:table-cell;padding 3px 10px;">Column B</div>
    <div style="display:table-cell; padding 3px 10px;">Column C</div>
  </div>
  <div style="display:table-row-group">
    <childselector [childinformation]="informationarray"></childselector>
  </div>

  </div>

<div style="display: table-row;">
      <div style="display:table-cell; padding 3px 10px;">{{Content A}}</div>
      <div style="display:table-cell; padding 3px 10px;">{{Content B}}</div>
      <div style="display:table-cell; padding 3px 10px;">{{Content C}}</div>
    </div>
<ng-container *ngIf="child.informationarray.length>0">
          <childselector [childinformation]="child.informationarray"></childselector>
        </ng-container

A列
B栏
C列

子组件

<div style="display:table;">
  <div style="display: table-header-group; font-weight:bold;">
    <div style="display:table-cell;padding 3px 10px;">Column A</div>
    <div style="display:table-cell;padding 3px 10px;">Column B</div>
    <div style="display:table-cell; padding 3px 10px;">Column C</div>
  </div>
  <div style="display:table-row-group">
    <childselector [childinformation]="informationarray"></childselector>
  </div>

  </div>

<div style="display: table-row;">
      <div style="display:table-cell; padding 3px 10px;">{{Content A}}</div>
      <div style="display:table-cell; padding 3px 10px;">{{Content B}}</div>
      <div style="display:table-cell; padding 3px 10px;">{{Content C}}</div>
    </div>
<ng-container *ngIf="child.informationarray.length>0">
          <childselector [childinformation]="child.informationarray"></childselector>
        </ng-container

{{Content A}}
{{Content B}}
{{Content C}}
这里的问题是
subrow
组件被包装在DOM中（
[…]
），然后您就失去了该组件上的显示表功能

这里的解决方案是使用属性选择器

@Component({
  selector: '[subrow]'
  ...
})

然后像这样使用它

取而代之的是

请参阅：
虽然这对我提供的plunkr有效，但它并不能解决我面临的更大问题，因为我有一个大型嵌套JSON对象，我正试图在表中递归显示它，但正如您所建议的，即使使用属性选择器，我也很难找到如何绕过选择器。基本上，如果我有一个大的嵌套JSON，并且父表有以下信息：而子对象有以下信息：。。。。。。现在，如何在不插入破坏表的标记的情况下让行调用自身，您可以将*ngFor放在
TableRow
中吗？比如：
。否则会破坏你的逻辑？你能用你的例子来说明一下吗？