angular - 使用 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

但是当它在浏览器上呈现时，我得到以下 点击图片

动态组件在 div 中呈现，但我只想在 tbody 中使用 tr。

请帮忙。

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

标签： angulartypescriptangular6

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

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

add-timeseries-row {
    display: contents;
}