使用ComponentFactory angular 6

Question

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

  

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

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

另一个组件具有单个tr（表行） 即

  

<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中呈现，但我只想在tbody中添加tr。

请帮助。

更新：我已经在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;
}