Angular 子组件中断 table

Question

我有一个 angular 组件，我想在带有 ngFor 的 table 中使用它，但它破坏了 table 布局。我的 table 看起来像：

<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 放在 tr 本身中，但这也没有用。

如何让它正确渲染 table？

Answer 1

这是 table 结构僵硬的副作用。您可以通过将组件用作原生 table 元素的属性而不是组件来解决此问题。

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

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

selector: '[app-product-row]'

Angular 子组件中断 table

Angular child component breaks table

angular

html-table

ngfor