HTML表与角度组件标题和组件主体冲突 [英] Html table in conflict with angular component header and component body

问题描述

我正在尝试从头开始制作一张有角度的桌子.我希望标题和正文保持动态.

Im trying to make from scratch a table in angular. I want that my header and body be dynamic.

<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>

该表已显示，但显示为两张表，即使我检查只是显示一张表也是如此.

The table is displayed but is showed like two tables, even when I inspect just show one table.

这是带有示例的plnkr

推荐答案

您将解决使用style ="display:grid"设置标签表的问题

You will fix you problem setting the tag table with style="display:grid"

<table style="display:grid">

无论如何，您都需要手动"将标头与您的身体同步

In any case you will need to sync your headers with your body "manually"

这是解决方法，如果您删除网格，则会遇到问题

This is the solution, if you delete the the grid you will have your problem

这篇关于HTML表与角度组件标题和组件主体冲突的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！