角度嵌入视图作为当前组件的对等视图

我想在我的HTML中这样做:

<tr *ngFor="let row of rows">
    <expandable-tree-row [columns]="cols" [data]="row"></expandable-tree-row>
</tr>

在 ExpandableTreeRowComponent 我用了一个 ViewContainerRef 因此 td 标记被放置为的直接子级 tr 元素,如下所示:

constructor(public readonly container: ViewContainerRef, private readonly cdr: ChangeDetectorRef) {
}

ngAfterViewInit(): void {
    this.columns.forEach(x => this.container.createEmbeddedView(x.template))
    this.cdr.detectChanges()
}

这就是在正确的位置正确地添加每列的模板。但现在我仍然有一个问题 tr 元素为空 <expandable-tree-row> 因此,通过基本上将所有列向右移动一列,会扰乱表输出。

现在我该如何摆脱第一个“坏”元素?

如果我把它作为一个指令,放在 tr 元素,如下所示:

<tr expandable-tree-row [columns]="cols"></tr>

那么在视觉上它看起来是对的,但生成的HTML在技术上是错误的,因为它最终是这样的:

<tr>...</tr>
<td>...</td>
<td>...</td>
<tr>...</tr>
<td>...</td>
<td>...</td>

换句话说 td 元素不是的子元素 tr 元素。