Question

我试图从头开始制作角度表。我希望我的标题和正文是动态的。

<my-datatable>
  <my-header header></my-header>
  <my-body body></my-body>
</my-datatable>

我的标题组件是

<thead >
  <tr>
      <th style="text-align: left;"   *ngFor="let field of fields | async ">
        {{ field  }}
      </th>
  </tr>
</thead>

我的身体成分是

<tbody>
  <tr *ngFor="let item of items | async ; let rowIndex = index; " > 
      <td *ngFor="let field of fields | async; let colIndex = index;" >
        {{ item[field] }}
      </td>
    </tr>
</tbody>

我的数据组件

<table>
      <ng-content select="[header]"></ng-content>
      <ng-content select="[body]"></ng-content>
</table>

显示该表，但显示为两个表，即使我检查只显示一个表。

this is a plnkr with the example

Answer 1

我想我参加派对的时间有点晚了，但对于通过Google发现这篇文章的其他人来说，这是一个更清晰的解决方案，不涉及更改CSS。

尝试使用属性选择器代替元素选择器。简而言之，改变：

selector: "my-head"

到

selector: "[myHead]"

并修改模板以不包含thead或tbody。

然后当您想要使用该组件时，而不是

<my-head></my-head>

使用

<thead myHead>...</thead>

以下是原始plunker的修改版本的链接，其中包含修改后的更改https://plnkr.co/edit/tIXePumNbA3iqTmCd8vK?p=preview

这篇文章也可能有用Remove the host HTML element selectors created by angular component

Answer 2

您将解决使用style =＆＃34; display：grid＆＃34;

设置标记表的问题

<table style="display:grid">

在任何情况下，您都需要将您的标题与您的身体同步＆＃34;手动＆＃34;

This is the solution，如果删除网格，则会出现问题

Html表与角度组件头和组件体冲突

2 个答案: