使用不同的Angular组件创建Bootstrap表

Question

我正在尝试使用两个Angular组件创建Bootstrap表。

我的代码的组织方式如下：

componentA.html
<table class="table table-bordered">
<thead>
<tr>
  <th scope="col">#</th>
  <th scope="col">First</th>
  <th scope="col">Last</th>
  <th scope="col">Handle</th>
</tr>
</thead>
 <tbody>
  <componentB></componentB>
 </tbody>
</table>



componentB.html
<tr>
 <th scope="row">1</th>
 <td>Mark</td>
 <td>Otto</td>
 <td>mdo</td>
</tr>

结果应如下所示：

但是实际上是这样的：

但是，当我将componentB的HTML内容直接放在componentA html中时，效果很好。

谢谢您的帮助

Answer 1

您缺少tr标记的范围：<th scope="row">1</th>

HTML中的table元素仅允许thead，tbody，tfoot和tr作为孩子。

将您的componentB选择器从“ componentB”更改为“ [componentB]”

<table class="table table-bordered">
<thead>
<tr>
  <th scope="col">#</th>
  <th scope="col">First</th>
  <th scope="col">Last</th>
  <th scope="col">Handle</th>
</tr>
</thead>
 <tbody componentB>
 </tbody>
</table>

Answer 2

....com/list