Angular 子组件破坏表格

Question

我有一个角度组件，我想在带有 ngFor 的表格中使用它，但它破坏了表格布局。我的桌子看起来像：

<table class="table table-stripped">
  <thead>
    <th style="width: 30%;">Network</th>
    <th style="width: 10%;">Quantity</th>
    <th style="width: 30%;">Supplier</th>
    <th style="width: 30%;">Conn Type</th>
    <th></th>
  </thead>
  <tbody>
    <tr *ngFor="let prod of opportunity.products; let i = index;">
      <app-product-row [product]="prod"></app-product-row>
    </tr>
  </tbody>
</table>

子组件如下所示：

<td style="width: 30%;">
...
</td>
<td  style="width: 10%;">
...
</td>
<td style="width: 30%;">
...
</td>
<td style="width: 30%;">
...
</td>
<td>
...
</td>

但所有子组件都放置在第一个 td 元素中，因为 Angular 放入 <app-product-row ...> 标记，这意味着这些组件无法正确渲染。我尝试将 app-product-row 放在 tr 本身中，但这也不起作用。

我怎样才能让它正确渲染表格？

Answer 1

这是表结构僵化的副作用。您可以通过使用该组件作为本机表元素的属性而不是组件来解决此问题。

<tr app-product-row></tr>

您还需要以不同的方式定义组件选择器 - 您需要将组件 html 包装在表行中。

selector: '[app-product-row]'