使用 ComponentFactory angular 6 在表格行中动态添加组件

Question

我有一个包含以下 html 的组件

<table>
<thead>
<tr>
<th>
</tr>
</thead>
<tbody>
<ng-container #container class="sample">

</ng-container>
 </tbody>
</table

另一个组件只有一个 tr(table rows) 即

<tr>
 <input class="form-control form-control-text-input" type="text" placeholder="Enter ID" [(ngModel)]="id"/>
</tr>

现在我正在使用这个答案动态添加这个表格行组件 Dynamically ADDING and REMOVING Components in Angular

但是当它在浏览器上呈现时，我得到了关注 Click on image

动态组件在 div 中呈现，但我只希望 tr 在 tbody 中。

请帮忙。

更新：我在 stackblitz Stackblitz 上创建了一个假人

Answer 1

我做了两处改动（下面还有截图）

1. 在 add-timeseries-row.component.ts 文件中，更改选择器：

import { Component } from '@angular/core';

@Component({
  selector: 'add-timeseries-row',
  templateUrl: './add-timeseries-row.component.html',
  styleUrls: ['./add-timeseries-row.component.css']
})
export class AddTimeseriesRowComponent {
 id1:string;
 id2:string;
 id3:string;
}

1. 在 add-time-series.component.css 中添加这个

add-timeseries-row {
    display: contents;
}