以角度 5 动态地将 <tr> 插入到 <tbody>

Question

按照这个https://blog.thecodecampus.de/angular-2-dynamically-render-components/#comment-789，我能够在单击链接时动态创建子组件。除了我的父组件是

父.html

     <table>
     <thead>
         <tr>
            <th>Name</th>
            <th>Age</th>
         </tr>
      </thead>
      <tbody #parent>
      </tbody>
      </table>

子组件.html：

        <tr><td>Blue</td><td>23</td></tr>

子组件.ts：

       selector:"app-tr-rows";

现在，当 tr 插入到 tbody 中时，firefox 检查器给出：

     <app-tr-rows>
           <tr><td>Blue</td><td>23</td></tr>
     </app-tr-rows>

这会导致所有子行仅出现在名称列上。有什么办法？

Answer 1

将子组件选择器更改为tr[app-row]。

这意味着该组件的选择器是任何具有app-row 属性的tr 标记。组件初始化后，将不再需要创建app-tr-rows 标签。它将改为创建一个tr 标记。

然后，将父模板更改为使用ng-template，如下所示：

<tbody>
  <ng-template #parent></ng-template>
</tbody>

这样，行组件将被添加为tbody 的子元素，而不是兄弟元素。

最后把子模板中的tr标签去掉，就变成了：

<td>Blue</td><td>23</td>

Here is a StackBlitz demo